查找最接近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類

回答

相關問題