2

これについて助けが必要です。基本的に、私が使用している次のコードがあります。参考になるかどうかわかりませんが…

$('#options-1').change(function () {
  -----blahblah
});

options-1 は私のドロップダウンメニューです。これには 2 つのオプションがあり、1 つは値 '1' で、もう 1 つは値 '2' です。次のことを行う何かを考え出すのを手伝ってください。

値が「1」のオプションを選択すると、次のようになります。1) 「img」タグを含む「li」タグを見つけます。「IMG」タグには「alt」または「title」属性 1 があり、これはドロップダウン メニューの値 (1) に対応します。

2) コードは LI タグを次のように変更する必要があります。

class="" style="display: none;"

に

class="active" style="display: block;"

そして、値「2」または値「3」などのオプションを選択すると、同じことが起こります。

事前にどうもありがとうございました！これについての助け、提案などをいただければ幸いです。おそらくおわかりのように、私は javascript/jquery の経験があまりありません (まだ :D)。

4

3 に答える 3

1

おそらく非アクティブなリスト項目は非表示にして、アクティブなものだけを表示する必要があります。

もしそうなら、これを試してください：

$('#options-1').on('change', function() {
    $("ul#myList li").removeClass('active').hide().has("img[alt='" + $(this).val() + "']").addClass('active').show();
}).trigger('change');

とにかく非アクティブなアイテムが隠されていることを考えると、「アクティブな」クラスを追加/削除する必要はないかもしれません。

注: リストが選択メニューの初期状態を適切に反映するように、変更をトリガーします。

デモ

これを行うもう 1 つの少し簡単な方法は、「アクティブな」クラスを追加/削除し、スタイル シート ディレクティブで表示/非表示を実行できるようにすることです。

CSS:

#myList li {
    display: none
}
#myList li.active {
    display: block
}

Javascript:

$('#options-1').on('change', function() {
    $("ul#myList li").removeClass('active').has("img[alt='" + $(this).val() + "']").addClass('active');
}).trigger('change');

デモ

于 2012-08-02T11:24:27.343 に答える
1 
$('#options-1').change(function () {
  $('li:has(img[alt="'+$(this).val()+'"])').addClass('active').show();
});
于 2012-08-02T10:16:48.790 に答える
-1

select タグが次のようになっているとします。

<ul id="yourUl">
    <li><img alt="1" /></li>
    <li><img title="2" /></li>
    <li><img alt="3" /></li>
</ul>

<select id="options-1">
    <option value="1">value 1</option>
    <option value="2">value 2</option>
</select>

したがって、スクリプトは次のようになります。

var findLi = function(val){
    $("ul#yourUl li img").each(function(){
        if($(this).attr("alt") == val || $(this).attr("title") == val)
            return $(this).parrent();
        return null;
    }
};

$(document).ready(function () {
    $("#options-1").change(function () {
        var val = $(this).val();
        val li = findLi(val);
        if(li == null)
            // do something to handle null or just ignore
        else
            $(li).addClass("active").css("display", "block");
    });
});

または使用has（@Moinに感謝）：

$(document).ready(function () {
    $("#options-1").change(function () {
        var val = $(this).val();
        $("ul#yourUl li:has(img[alt='" + val + "']), ul#yourUl li:has(img[title='" + val + "'])").each(function() {
            $(this).addClass("active").css("display", "block");
        });
    });
});

また

$(document).ready(function () {
    $("#options-1").change(function () {
        var val = $(this).val();
        $("ul#yourUl li img").each(function () {
            if ($(this).attr("alt") == val || $(this).attr("title") == val)
                $(this).parrent().addClass("active").css("display", "block");
        });
    });
});
于 2012-08-02T10:23:04.537 に答える