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

-1

<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>

我想发生的，当用户点击“查找商店”与编号chevvy跨度标签需要引用我需要更改类字形到山形了，我试着做下面的代码

$('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"); 
} 
});

但与上面的代码，它引用的“查找商店”并应用字形它显示两个。

我该如何引用Id chevvy的其他span标签并更改其上的雪佛龙？

来源

2015-02-09 Code Ratchet

一个是#chevvy项目只是那里的图标？ – PavKR 2015-02-09 05:19:46

那么谁投票呢？任何解释为什么？ – 2015-02-10 09:18:34

您可以试试这个：您可以使用类选择器找到范围，然后删除/添加类。

注意 - 已使用跨度id=chevvy，如果你有多个这样的跨度，那么请确保您必须使用唯一的ID为每个DOM元素。

$('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"); 
    } 
});

来源

2015-02-09 05:19:35

您需要优化您的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; 
});

来源

2015-02-09 05:30:00 PavKR

你find('span')是找到所有的跨度，但你只需要触摸之一。通过添加更多选择器来缩小它，如find('span.glyphicon')。

顺便说一句，你可以离开类独自一人，并利用jQuery的toggleClass功能的切换都-up和-down没有所有的if-else：

$('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'); 
});

来源

2015-02-09 05:52:06 tomclegg

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

回答

相关问题