理解javascript toggle類問題難度

-3

我想將glyphicon-plus改爲glyphicon-minus on click事件。這裏是我的代碼理解javascript toggle類問題難度

<?php foreach (get_categories() as $category){ ?> 
      <div class = "sidebar_menu" > 
       <li class="<?php echo $active = ($i==1)?"active":""; ?>"><a href="<?php echo get_category_link(get_cat_ID($category->name)); ?>" ><strong><?php echo $category->name;?> </strong></a></li> 
       <div class = "floatright"> 
        <li id="cool"> 
         <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne<?php echo $i; ?>"> 
          <i class="glyphicon glyphicon-plus" aria-hidden="true"></i> 
         </a> 
        </li> 
       </div> 
      </div>

和js。

$('#cool').click(function(){ 
    $(this).find('i').toggleClass('glyphicon-plus').toggleClass('glyphicon-minus'); 
});

它只適用於第一個列表項目，而我需要使它適用於所有列表項目。

來源

2016-08-02 kuldeep sharma

請添加HTML代碼，而不是PHP的。這會更容易理解。這是更jquery而不是wordpress的問題。 – renathy

@ kuldeep-sharma問題需要改進一點。你是否想要點擊任何單個列表項目來更改所有列表項目，或者您想要在點擊的列表項目上更改* glyphicon-plus *到* glyphicon-minus *和voice versa？ – adi

您使用#cool選擇器和點擊更改類爲「this」的死者。在這種情況下，this只有一個死者"i"元素。這個元素的類改變了。

擁有HTML代碼在這種情況下會更方便。我們不知道什麼是$類別和其他PHP變量，因此這使得回答問題更加困難。

來源

2016-08-02 10:35:21 renathy

我在Java腳本很差。所以我必須做的 –

首先在您的問題中添加HTML。 – renathy

首先，您必須將ID替換爲class，因爲ID應該是唯一的。所以，你的HTML會是這樣：

<div class = "sidebar_menu" > 
    <li class="<?php echo $active = ($i==1)?"active":""; ?>"><a href="<?php echo get_category_link(get_cat_ID($category->name)); ?>" ><strong><?php echo $category->name;?> </strong></a></li> 
    <div class="floatright"> 
     <li class="cool"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne<?php echo $i; ?>"> 
       <i class="glyphicon glyphicon-plus" aria-hidden="true"></i> 
      </a> 
     </li> 
    </div> 
</div>

如果你想改變每個glyphicon加到glyphicon減 &聲音亦然然後雙擊第一次檢出現有glyphicon。然後可以基於當前的圖形來執行所需的功能。因此，JavaScript的將是這樣的：

$('.cool').click(function(){ 
    var plus = $("#basic-addon1").find('.glyphicon-plus'); 
    var plusExistence = $(plus).length; 
    if (plusExistence > 0){ 
     $(plus).removeClass('glyphicon-plus'); 
    }else{ 
     $("#basic-addon1").find('.glyphicon').addClass('glyphicon-minus') 
    } 
});

來源

2016-08-02 12:42:46 adi

感謝#mambro的幫助，但它對我無效。 –

我一些如何管理來解決這個問題：這裏是我的代碼

<div class = "floatright"> 
      <li> 
       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne<?php echo $i; ?>"> 
        <span><i class="cool glyphicon <?php echo $active = ($i==1)?"glyphicon-minus":"glyphicon-plus"; ?>" aria-hidden="true"></i></span> 
       </a> 
      </li> 
     </div>

和js

$('.cool').click(function(){ 
    if($(this).hasClass('glyphicon-plus')) 
    { 
     $(this).removeClass('glyphicon-plus').addClass('glyphicon-minus'); 
    } else { 
     $(this).removeClass('glyphicon-minus').addClass('glyphicon-plus'); 
    }});

來源

2016-08-03 05:41:52

理解javascript toggle類問題難度

回答

相關問題