0

順序付けされていないリストに複数のリストアイテムがあります。各リストアイテムは次のようになります。

<li class="something" onclick="function(somePHPparameter)">somePHPparameter</li>

この関数は、重要な場合、ajaxを介して現在空のdivを設定します。デフォルトで、ページの読み込みが最初に終了したときに、liをクリックするとdivが表示されるようにしたいと思います。同じliをもう一度クリックすると、divが空になります。代わりに別のliがクリックされた場合は、別の「somePHPparameter」で内容を変更するだけです。私の現在の実装は次のようなものです。

$('.continent').click(function(){
    if ($(this).hasClass('select')){
        $("#box").empty();
        $('.continent').removeClass('select');
    }
    else{
        $('.continent').removeClass('select');
        $(this).addClass('select');
    }
});

1つは、私のコードに欠陥のあるロジックがありますか？何か特別なことはありますか？2つ目は、実際の問題は、クラスが削除されても、divにデータを入力するonclickが引き続き発生することです。e.preventDefault（）およびe.stopPropagation（）は機能しません。何か案は？

4

2 に答える 2

1

event.preventDefault() と event.stopPropagation() は、クリックがトリガーされたときに 2 つの異なる関数が既に呼び出されているため、この場合には役に立ちません。1 つの関数はインラインで呼び出され、もう 1 つの関数は jQuery を使用して呼び出されます。

これを回避するには、onclick属性を削除し<li>て、jquery クリック ハンドラ内でその関数を呼び出します。

PHP で生成されたパラメーターの場合は、rel属性として追加し<li>、以下のように jquery ハンドラーで使用します。

<li class="something" rel="somePHPparameter">somePHPparameter</li>

--

$('.continent').click(function(){
if ($(this).hasClass('select')){
    $("#box").empty();
    $('.continent').removeClass('select');
}
else{
    $('.continent').removeClass('select');
    $(this).addClass('select');

    var PHPparam = $(this).attr('rel');

    functionCallUsing(PHPparam);
}

return false;
});

大雑把な考えです。

于 2012-07-27T00:12:57.977 に答える
0

あなたは簡単に行うことができます

$('.continent').click(function(){
    if ($(this).hasClass('select')){
        $("#box").empty();
        $('.continent').removeClass('select');
    }
    else{
        $('.continent').removeClass('select');
        $(this).addClass('select');
    }

    return false;
});
于 2012-07-26T22:51:03.180 に答える