2

我需要一些帮助。基本上我有以下我一直在使用的代码。我不确定是否会有所帮助...

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

options-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').change(function () {
  $('li:has(img[alt="'+$(this).val()+'"])').addClass('active').show();
});
于 2012-08-02T10:16:48.790 回答
1

可能不活动的列表项应该被隐藏，只显示活动的项。

如果是这样，那么试试这个：

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

鉴于非活动项目无论如何都被隐藏，可能不需要添加/删除“活动”类。

注意：我们触发更改以确保列表正确反映选择菜单的初始状态。

演示

另一种稍微简单的方法是添加/删除“活动”类并允许样式表指令进行显示/隐藏。

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

假设您的选择标签如下所示：

<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 回答