最初のクリックでcss（）が起動しない

Question

リスト内の2つのボタンのCSSを切り替えることを試みています。 1つをクリックすると、もう1つはボーダーを持たず、その逆もあります。ここに私のコードです：

function navigate_menu(event, ec){ 

    $(event).css("border-top", "3px solid rgba(102,205,0, 0.8)"); 
    var search_id=$(event).attr("name"); 
    var chartid = "pie_chart_"+$(event).attr("name"); 
    var editid = "edit_"+$(event).attr("name"); 

    if(ec=="c"){ 

     $(".li-edit").css("border-top", "0px solid rgba(102,205,0, 0.8)");  
     $("#"+chartid).appendTo($("#chart_"+search_id+"_container")); 
     $("#"+editid).css("display","none"); 
     $("#"+chartid).css("display","block"); 


    }else{ 

     $(".li-chart").css("border-top", "0px solid rgba(102,205,0, 0.8)");   
     $("#"+editid).appendTo($("#chart_"+search_id+"_container")); 
     $("#"+chartid).css("display","none"); 
     $("#"+editid).css("display","block"); 


    } 
} 

HTML：

+"<ul id=\"navigation_list\">" 
     +"<li onclick=\"navigate_menu(this,'c')\" class=\"li-chart\" name=\""+search_id+"\">Chart &amp; Legend</li>" 
     +"<li onclick=\"navigate_menu(this,'e')\" class=\"li-edit\" name=\""+search_id+"\">Edit Chart\\Change Data</li>" 
+"</ul>" 

だから、私が最初にクリックしたときに、何も起こりませんし、それが動作する秒後。次に、他のボタンをクリックすると、同じ（最初の何もない、2番目の作品）。最初のクリックで、親（ul）をクリックしたと思うかもしれませんが、どのように修正するのか分かりません。この「メニュー」はJS関数から複数の要素に追加されるので、残念です。

私もaddClass()とremoveClass()を試しましたが、それと同じ結果です。

ありがとうございました！

Answer 1

あなたのCSSにborderedクラスを作成してください。次に、elementと2番目の引数（名前の付け方は分かりません）を渡して、fnをクリックハンドラのどこかに呼び出します。ちょうどcontextと書いてあります。ボーダー変更の責任を負う上記のコードから古いスタッフを削除したことを確認してください。

function toggleBorder(element, context){ 

    if(context === 'c'){ 
     if($(".li-chart").hasClass('bordered')){ 
     $(".li-chart").removeClass('bordered'); 
     } 
     $(".li-edit").addClass('bordered'); 

    }else{ 
     if($(".li-edit").hasClass('bordered')){ 
     $(".li-edit").removeClass('bordered'); 
     } 
     $(".li-chart").addClass('bordered'); 
    } 

} 

Answer 2

liに共有クラスを指定します。 li-item：次に

<ul id="navigation_list"> 
    <li onclick="navigate_menu(this,'c')" class="li-chart li-item" name="+search_id+">Chart &amp; Legend</li> 
    <li onclick="navigate_menu(this,'e')" class="li-edit li-item" name="+search_id">Edit Chart Change Data</li> 
</ul> 

クリックを検出し、クリックに罫線を適用し、他のすべてから削除するjQueryの.on("click"機能を使用します。

$(document).ready(function() { 
    $(document).on("click", ".li-item", function() { 
     $(this).addClass("border"); 
     $(".li-item").not($(this)).removeClass("border"); 
    }) 
}) 

は、適用するスタイルとCSSクラスを作成します。

.border { 
    border: 2px solid blue; 
} 

フィドル：https://jsfiddle.net/w9bwq57m/

Answer 3

li要素のonlickの代わりにjqueryのクリックを使うことをお勧めします。また、あなたはそれらの値が関数に渡すことができるように、LI要素にデータ・キー=「C」とデータ・キー=「e」を追加する必要があるでしょう：