0

特定のラジオボタンが選択されたときにdivを表示し、ラジオボタンの値に基づいてそのラジオボタンが「選択解除」された場合にそのdivを非表示にする、非常に単純なjQueryコードを探しています。

1つのフィルターのラジオボタンで機能させる方法を見つけましたが、2つのフィルターでそれを解決したいと思います

  1. 属するタイプに基づいて
  2. ........数量に基づく

最初のフィルター (タイプ) で機能するコードは次のとおりです。

<script>
    var $filters = $("input:radio[name='type']"); 


var $categoryContent = $('#mainhide .mainresultbox');
var $errorMessage = $('#errorMessage');
$filters.click(function() {
    // if any of the radio buttons for brand are checked, you want to show div's containing their value, and you want to hide all the rest.
    $categoryContent.hide();
     var $selectedFilters = $filters.filter(':checked');
    if ($selectedFilters.length > 0) {
        $errorMessage.hide();
        $selectedFilters.each(function (i, el) {
            $categoryContent.filter(':contains(' + el.value + ')').show();
        });
    } else {
        $errorMessage.show();
    }

});
</script>

ラジオ ボタンの HTML は次のとおりです。

<ul>
    <li><label for="cdg"><input type="radio" id="cdg" name="type" value="brand1"> brand1</label></li>
    <li><label for="cdh"><input type="radio" id="cdh" name="type" value="brand2"> brand1</label></li>
    <li><label for="cdi"><input type="radio" id="cdi" name="type" value="brand3"> brand1</label></li>
</ul>

<ul>
    <li><label for="cdj"><input type="radio" id="cdj" name="quantity" value="10">10</label></li>
    <li><label for="cdk"><input type="radio" id="cdk" name="quantity" value="20">20</label></li>
    <li><label for="cdl"><input type="radio" id="cdl" name="quantity" value="30">30</label></li>
</ul>

これがdivとその内容です

<div id="#mainhide">
  <div>brand1 in stock - 10</div>
  <div>brand1 in stock - 20</div>
  <div>brand1 in stock - 30</div>
</div>
<div id="errorMessage">reset all fliters</div>

両方のフィルターを機能させるにはどうすればよいですか。

ありがとう、ナレシュ・カミレッディ

4

3 に答える 3

1

ID に特殊文字を使用することはできません。ID は有効な規則に従う必要があります。これは<div id="#mainhide">.無効な ID 名です

使用する ：<div id="mainhide">

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

より詳しい情報 ：

HTML の id 属性の有効な値は何ですか?

于 2013-05-29T09:39:32.347 に答える
0

属性セレクターで行ったように、再フィルター処理できます。

var $selectedFilters = $filters.filter(':checked').filter('[value="10"]';

$(document).ready(function(){[your code here]});また、ページがまだロードされている間に JS を大量にロードする代わりに使用します。また#、他の人が提案したように、ID で使用しないことをお勧めします。

JQuery ドキュメント

于 2013-05-29T09:45:29.087 に答える
0

あなたが何を望んでいるのか正確にはわかりませんが、これを見ることができます：

また、そうで<div id="mainhide">はありません<div id="#mainhide">

http://jsfiddle.net/yyCSQ/3/

于 2013-05-29T09:31:27.423 に答える