这个jQuery if语句有什么问题

What is wrong with this jQuery if statement?

本文关键字:什么 问题 语句 jQuery if 这个      更新时间:2023-09-26

此页面的目标是根据下拉选择显示不同的选项。 切换开关当前正在按预期工作,而无需 if 语句。 如何调整 if 语句以进行正确的比较?

<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<link href="~/Content/SearchInventory.css" rel="stylesheet" />
<script>
    $(function () {
        $(".dropdown-menu li a").click(function () {
            var selection = $(this).parents(".btn-group").find('.selection').text($(this).text());
            if(selection =='Projectors') {
                $('#projectorSearch').toggle();
            }
        });
    });
</script>


<h2>Search Inventory</h2>
<div class="col-md-12">
    <div class="row">
        <div class="col-md-3">
            <div class="btn-group">
                <button class="btn btn-primary dropdown-toggle btn-lg" type="button" id="dropDownSelectItemType" data-toggle="dropdown" aria-expanded="true">
                    Select an Item Type
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labeledby="dropDownSelectItemType">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Projectors</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Desktop Printers</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Network Printers</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Tablets</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Televisions</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Polycom Phones</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cameras</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Monitors</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Leased Printers</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cell Phones</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chair(ergo)</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Keyboard(ergo)</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Mouse(ergo)</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Footrest(ergo)</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Licensed Software</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Desk Phones</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="col-md-12">
    <div class="projectorSearch" id="projectorSearch">
        <label>onomonpeia</label>
    </div>
</div>
您无需四

处寻找单击的text,因为您已经可以访问引用为HTMLAnchorElement this元素

 var selection = $(this).text();

而不是

 var selection = $(this).parents(".btn-group").find('.selection').text($(this).text());

完整示例:

$(function () {
    $(".dropdown-menu li a").click(function () {
        var selection = $(this).text();
        if(selection =='Projectors') {
            $('#projectorSearch').toggle();
        }
});

这是一个工作示例

你做得很好,但错过了一件事。

var selection = $(this).parents(".btn-group").find('.selection').text($(this).text());

此行将更改 .select 的文本,但不返回 $(this).text()

所以你必须将$(this).text()与字符串进行比较,而不是选择。

或者只是再次重新定义选择,就像这 2 行一样。

$(this).parents(".btn-group").find('.selection').text($(this).text());
var selection = $(this).text()