0

チェックボックスが選択されているかどうかに応じて、DIV を非表示/表示にしようとしています。

私のサイトには複数のアイテムが表示され、それぞれが .itemBox という DIV の下にあります。一部の色がチェックボックスに表示されます。ユーザーが選択した色以外のすべてのアイテムを非表示にしたいと思います (選択したチェックボックスによって異なります)。

私の JavaScript は、各 .itemBox アイテム (色) の ID をチェックしてから、非表示/表示する必要があります。

これまでのところ、フォームと JavaScript はありますが、チェックボックスをオンにしても何も起こりません。

形：

div class="colors">
<?php
$colors = mysql_query("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1");
while ($colorBoxes = mysql_fetch_array($colors))
{
echo "<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'>   ".$colorBoxes[color_base1]."</font><br />";
}
?>
</div>

ジャバスクリプト:

<script>
    $('.colors').delegate('input:checkbox', 'change', function() { 
         if ($(this).attr('checked')) {
            $(".itemBox not(#" + $(this).val()  + ")").hide();
            $(".itemBox #" + $(this).val()).show();
        }
    })
</script>

出力：

<td><div name='item' id='".$info[color_base1]."' class='itemBox'> .....
4

3 に答える 3

1

これが私がそれをする方法です：

$(":checkbox").bind("click", function (event) {
     if($(this).is(':checked')) {
          $(".itemBox:not(#" + $(this).val()  + ")").hide();
          $(".itemBox[id='" + $(this).val() + "']").show();
     }else {
           //maybe you should do smth if checkbox is unchecked
     }
});

あなたの間違いは：notの前のスペースであり、2番目のセレクターは[の前にスペースがない$（"。itemBox[name ='value']"）のようになるはずです。

于 2012-08-02T19:33:42.220 に答える
0

あなたのコードに基づいて$info[color_base1]と$colorBoxes[color_base1]が同じであると仮定すると、おそらくこのようなものですが、PHP出力とデータベース値を実際によく読んでいないので、わかりにくいですか?

$('input[type="checkbox"]').on('change', function() { 
    if (this.checked) {
        $(".itemBox").hide();
        $("#" + this.value).show();
    }
});
于 2012-08-02T19:20:18.897 に答える
0

いくつかのこと、jQuery 選択でクラスとして使用していcolorますが、html では名前として定義されています。

<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'>   ".$colorBoxes[color_base1]."</font>

チェックボックス名を使用したい場合は、次のようなセレクターを使用できます。

$('input[name=color]')....

.表記がクラスを表すことを覚えておいてください。

このjsFiddleを見てください：http://jsfiddle.net/ufomammut66/h6m4H/

非常にシンプルですが、トグルが次の itemBox div を非表示にしていることがわかります。あなたのhtmlはおそらく異なるため、うまくいきませんが、すべてを投稿しなかったため、正しいhtmlパスを使用できませんでした。

于 2012-08-02T19:23:23.810 に答える