Question

此页面的目标是根据下拉选项显示不同的选项。切换当前正在工作，没有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>

Answer 1

您无需循环查找点击的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();
        }
});

这是Working Sample

Answer 2

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

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

此行将更改.selection的文本。但不返回$（this）.text（）

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

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

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

这个jQuery if语句有什么问题？

2 个答案: