獲取多個資料元素類并放入DOMelmenent-有解無憂

當我單擊一個元素時，我想要 - 另一個元素獲取我單擊的屬性的類名：

var countryElements = document.getElementById('items').childNodes;
  var countryCount = countryElements.length;
  for (var i = 0; i < countryCount; i  ) {
    countryElements[i].onclick = function() {
      console.log('My Data Name: '   this.getAttribute('data-name'));
    }
  }
  
  $('#items .check').click(function () {
    var linkHref = $(this).data('name');
    $('#provinceInfo').html(linkHref);
    $('#provinceInfo').addClass(linkHref);
});

#provinceInfo{
background-color:#f4f4f4;
padding:30px;
margin-bottom:10px
font-weight:700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="provinceInfo"></div>
<div id="items">
  <div class="check" data-name="london">United Kingdom</div>
  <div class="check" data-name="berlin">Germany</div>
  <div class="check" data-name="paris">France</div>
</div>

如何讓它只顯示當前類？而不是所有的點擊？場景：我點擊德國——設定了柏林類，我點擊了法國——設定了巴黎類，洗掉了柏林。謝謝你。

uj5u.com熱心網友回復：

改變：

$('#provinceInfo').addClass(linkHref);

到：

$('#provinceInfo').removeClass().addClass(linkHref);

.removeClass()沒有任何引數將從匹配的元素中洗掉所有類。

顯示代碼片段

var countryElements = document.getElementById('items').childNodes;
  var countryCount = countryElements.length;
  for (var i = 0; i < countryCount; i  ) {
    countryElements[i].onclick = function() {
      console.log('My Data Name: '   this.getAttribute('data-name'));
    }
  }
  
  $('#items .check').click(function () {
    var linkHref = $(this).data('name');
    $('#provinceInfo').html(linkHref);
    $('#provinceInfo').removeClass().addClass(linkHref);
});

#provinceInfo{
background-color:#f4f4f4;
padding:30px;
margin-bottom:10px
font-weight:700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="provinceInfo"></div>
<div id="items">
  <div class="check" data-name="london">United Kingdom</div>
  <div class="check" data-name="berlin">Germany</div>
  <div class="check" data-name="paris">France</div>
</div>

uj5u.com熱心網友回復：

您可以使用 attr 而不是 addclass 并將您的默認類添加到其中，這樣您就不會錯過它。

$('#items .check').click(function () {
    var linkHref = $(this).data('name') ' check';
    $('#provinceInfo').html(linkHref);
    $('#provinceInfo').attr('class', linkHref);
});

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

標籤：html jQuery

上一篇：賽普拉斯-userAgent開關

下一篇：如何切換“活動”類但再次單擊時將其隱藏