單擊按鈕將元素移動到不同位置-有解無憂

當單擊不同的 div 時，我試圖將一個元素（例如影像）移動到三個不同的位置。

例如。如果單擊按鈕 01padding-left=0px ，則將其添加到影像中。

例如。如果單擊按鈕 02padding-left=30px ，則將其添加到影像中。

例如。如果單擊按鈕 03padding-left=60px ，則將其添加到影像中。

狀態01

單擊按鈕將元素移動到不同位置

狀態02

單擊按鈕將元素移動到不同位置

狀態03

單擊按鈕將元素移動到不同位置

這是我的第一次嘗試，但沒有移動影像。

$('#cardEN').on('click', function() {
  $('.logo').removeClass('en');
  $(this).addClass('en');
});

$('#cardCN').on('click', function() {
  $('.logo').removeClass('cn');
  $(this).addClass('cn');
});

$('#cardAR').on('click', function() {
  $('.logo').removeClass('ar');
  $(this).addClass('ar');
});

img {
  width: 100px;
}

.logo {
  padding-left: 0px;
}

.en {
  padding-left: 0px;
}

.cn {
  padding-left: 30px;
}

.ar {
  padding-left: 60px;
}

.nav {
  padding-top: 100px
}

.button {
  display: inline-block;
  text-align: center;
  margin-left: 20px;
  width: 50px;
  border: 1px solid black;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo"><img src="https://images.pexels.com/photos/1114318/pexels-photo-1114318.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /></div>


<div class="nav">
  <div class="button" id="cardEN">Button 01</div>
  <div class="button" id="cardCN">Button 02</div>
  <div class="button" id="cardAR">Button 03</div>
</div>

uj5u.com熱心網友回復：

您需要向.logo. $(this)指的是點擊的按鈕而不是.logo元素，見下文：

$('#cardEN').on('click', function() {
  $('.logo').addClass('en').removeClass('cn ar');
});

$('#cardCN').on('click', function() {
  $('.logo').addClass('cn').removeClass('en ar');
});

$('#cardAR').on('click', function() {
  $('.logo').addClass('ar').removeClass('cn en');
});

img {
  width: 100px;
}

.logo {
  padding-left: 0px;
}

.en {
  padding-left: 0px;
}

.cn {
  padding-left: 30px;
}

.ar {
  padding-left: 60px;
}

.nav {
  padding-top: 100px
}

.button {
  display: inline-block;
  text-align: center;
  margin-left: 20px;
  width: 50px;
  border: 1px solid black;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo"><img src="https://images.pexels.com/photos/1114318/pexels-photo-1114318.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /></div>


<div class="nav">
  <div class="button" id="cardEN">Button 01</div>
  <div class="button" id="cardCN">Button 02</div>
  <div class="button" id="cardAR">Button 03</div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/533444.html

標籤：javascripthtmljQuerycss

上一篇：無法在Linux容器中加載dbatools

下一篇：AR Engine光照估計能力，讓虛擬物體在現實世界更具真實感