Question

我目前正在开发一个项目（ASP.NET MVC），我需要用户从下拉菜单中选择隐藏/显示选择中的div。以下代码在桌面浏览器中运行良好。但是，我在Android和iOS浏览器上遇到了一个错误。

为了让我的代码在移动浏览器上正常运行，我需要选择然后从此下拉菜单中重新选择一个选项。换句话说，当我第一次从下拉菜单中选择一个选项时，没有任何预期的div隐藏/显示。当我回到下拉菜单并重新选择相同的选项时，div会隐藏/显示。我希望我的代码可以用于一个选择。

HTML

<div class="col-md-12 required" id="petChoiceType">
      @Html.LabelFor(model => model.PetChoice, new { @class = "control-label" })
      @Html.DropDownListFor(m => m.PetChoice, petType.Select(d => new SelectListItem { Value = d.Key, Text = d.Value }).ToList(), "-- Please Select --  ", new { @class = "form-control", required = "required", id = "petOptions" })
      @Html.ValidationMessageFor(model => model.PetChoice, "Please select", new { @class = "text-danger" })
</div>

的jQuery

$('#petChoiceType').click(function () {
    if ($('#petOptions').val() === "Dog") {
        $('.individualInformationSection').toggle();
    }

    if ($('#petOptions').val() === "Cat") {
        $('#coBuyerInfo').toggle();
        $('#coBuyerSignatureSection').toggle();
    }

    if ($('#petOptions').val() === "Bird") {
        $('#coBuyerInfo').toggle();
        $('#coBuyerSignatureSection').toggle();
        $('#buyerSignatureTitleSection').toggle();
        $('#SSN').removeAttr('required');
        $('#buyerInfoSection').toggleClass('required');       
    }

    else {
        $('#SSN').attr('required');
    }
});

CSS（这是SO上的建议修复，虽然它似乎没有任何效果）

html {
    cursor:pointer;
}

我尝试将.click（）更改为.select()和.change()。

.select()：代码继续在桌面浏览器上正常运行，但下拉菜单丢失了移动浏览器中的所有功能

.change()：我无法从菜单中选择其他选项并触发div隐藏/显示。应用程序停留在用户的第一选择上。我真的需要这个功能。

我还没有尝试过jQuery Mobile。我之前从未使用过它，所以我甚至不知道从哪里开始进行故障排除。

我正在研究jQuery代码的以下内容，但我意识到我需要用其他东西替换.click()事件。如果我需要做的只是找到.click()事件的替代品，我认为这段代码是不必要的：

的jQuery

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    $('#petChoiceType').click(function () {
        if ($('#petOptions').val() === "Dog") {
            $('.individualInformationSection').toggle();
        }

        if ($('#petOptions').val() === "Cat") {
            $('#coBuyerInfo').toggle();
            $('#coBuyerSignatureSection').toggle();
        }

        if ($('#petOptions').val() === "Bird") {
            $('#coBuyerInfo').toggle();
            $('#coBuyerSignatureSection').toggle();
            $('#buyerSignatureTitleSection').toggle();
            $('#SSN').removeAttr('required');
            $('#buyerInfoSection').toggleClass('required');       
        }

        else {
            $('#SSN').attr('required');
        }
     });
 }

这是我在移动浏览器上使用jQuery代码遇到的唯一错误。我甚至都在努力去理解发生了什么，所以排除故障真是太痛苦了。如果有人能向我解释发生了什么，并告诉我如何解决这个问题，我真的很感激。

Answer 1

如果没有看到你的其余代码，我无法给你一个确切的答案，但它应该看起来更像这样：

$('#petOptions').change(function () {
    var petVal = $(this).val();
    
    // This will show you the value that's being returned by your select element
    console.log(petVal);
    
    if (petVal === "Dog") {
        $('.individualInformationSection').toggle();
    } else if (petVal === "Cat") {
        $('#coBuyerInfo').toggle();
        $('#coBuyerSignatureSection').toggle();
    } else if (petVal === "Bird") {
        $('#coBuyerInfo').toggle();
        $('#coBuyerSignatureSection').toggle();
        $('#buyerSignatureTitleSection').toggle();
        $('#SSN').removeAttr('required');
        $('#buyerInfoSection').toggleClass('required');       
    } else {
        $('#SSN').attr('required');
    }
});

以下是使用代码的工作示例：

$('#petOptions').change(function () {
    var petVal = $(this).val();
    
    // This will show you the value that's being returned by your select element
    console.log(petVal);
    
    if (petVal === "Dog") {
        alert('You chose dog');
    } else if (petVal === "Cat") {
        alert('You chose cat');
    } else if (petVal === "Bird") {
        alert('You chose bird');       
    } else {
        alert('You chose nothing');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="petOptions">
  <option disabled selected>--Choose an animal--</option>
  <option value="Dog">Dog</option>
  <option value="Cat">Cat</option>
  <option value="Bird">Bird</option>
  <option>Nothing</option>
</select>

jQuery .click（）事件与移动浏览器无法正常工作。我如何解决它？

1 个答案: