Question

我的页面上有以下内容

<h5 class="text-center" id="findStore" style="width:260px">
    <a data-toggle="collapse" data-parent="#accordion" href="#@item.ProductId" aria-expanded="true" aria-controls="@item.ProductId" style="color: @item.ProductTextColor;font-size:19px;text-decoration: none;" class="text-center">
         <span class="text-center" style="margin-left:14%">FIND A STORE</span> 
         <span id="chevvy" class="glyphicon glyphicon-chevron-down pull-right"></span>
    </a>
</h5>

我想要发生的是当用户点击＆＃34;查找商店＆＃34;需要引用带有Id chevvy的span标签，我需要将类chevron-down更改为chevron-up，我尝试使用以下代码

$('h5:not(#nutritionInfo)').click(function () {

if ($(this).find('span').hasClass("glyphicon glyphicon-chevron-down")) {
    $(this).find('span').removeClass("glyphicon glyphicon-chevron-down");
    $(this).find('span').addClass("glyphicon glyphicon-chevron-up");
} else {
    $(this).find('span').removeClass("glyphicon glyphicon-chevron-up");
    $(this).find('span').addClass("glyphicon glyphicon-chevron-down");
}
});

但是使用上面的代码，它引用了＆＃34;查找商店＆＃34;并将雪佛龙应用于它，以便显示两个。

如何使用Id chevvy引用另一个span标记并更改其上的V形符号？

Answer 1

您的find('span')找到所有跨度，但您只想触摸那个。通过添加更多选择器来缩小范围，例如find('span.glyphicon')。

顺便提一下，您可以单独离开glyphicon课程，并使用jQuery的toggleClass功能切换-up和-down，而不使用所有if-else：< / p>

$('h5:not(#nutritionInfo)').click(function () {
    $(this).find('span.glyphicon').
        toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

您也可以考虑使用伪类而不是id来确定哪些h5元素获得此行为。例如，你可以拥有一堆这些

<h5 class="toggle-my-chevron">...</h5>
<h5 class="toggle-my-chevron">...</h5>

全部由其中一个控制

$('.toggle-my-chevron').click(function () {
    $(this).find('span.glyphicon').
        toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

Answer 2

您可以尝试这样做：您可以使用glyphicon类选择器查找范围，然后删除/添加类。

注意 - 您使用了span id=chevvy，如果您有多个此类跨度，请确保您必须为每个DOM元素使用唯一ID。

$('h5:not(#nutritionInfo)').click(function () {
  var span = $(this).find('.glyphicon');
  if ($(span).hasClass("glyphicon-chevron-down")) {
    $(span).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
  } else {
    $(span).addClass("glyphicon-chevron-down").removeClass("glyphicon-chevron-up");
  }
});

Answer 3

您需要优化HTML和CSS，因为您的代码段中包含冗余HTML - 这也有助于清理JS。以下是您可以做的快速示例：

<强> HTML

<h5 class="text-center" id="findStore">
  <a href="#" class="">FIND A STORE</a>
</h5>

<强> CSS

通过CSS应用图标图像，例如

h5 a {padding-right: 10px; background: transparent url('chevron-down.png') 100% 0 no-repeat}
h5 a.active {background: transparent url('chevron-up.png') 100% 0 no-repeat}

<强> JS / JQUERY

$('h5 a').click(function(){
  $(this).toggleClass('active');
  return false;
});

查找最接近的span元素并更改CSS类

3 个答案: