javascript - 尝试在 jquery 中使用模式对话框

Question

我在函数中有一些 if/else 语句，如下所示(下面的代码和 JSFiddle here )，我正在尝试使用 confirmModal dialog当用户从下拉菜单中选择第三个选项时。

$(document).ready(function() {
    var dropdownSelectionItem = $("#name").val();
    console.log("Check:" + dropdownSelectionItem);

    if (dropdownSelectionItem == "First") {
        //alert("Are you sure you want to select first option?");
        id_value = 1000;
    } else if (dropdownSelectionItem == "Second") {
        id_value = 2000;
    } else if (dropdownSelectionItem == "Third") {
        //alert("Are you sure you want to select third option?");
        $('#content').confirmModal({
            topOffset : 0,
            onOkBut : function() {
                id_value = 3000;
            },
            onCancelBut : function() {},
            onLoad : function() {},
            onClose : function() {}
          });
    } else if (dropdownSelectionItem == "Fourth") {
        id_value = 4000;
    }
});

<select class="form-control" id="name">
    <option value="First">First</option>
    <option value="Second">Second</option>
    <option value="Third">Third</option>  
    <option value="Fourth">Fourth</option>                                              
</select>

<!-- 
    <button data-confirmmodal-bind="#content" data-topoffset="0" data-top="0">example</button>
-->

为什么不起作用？我在使用图书馆时有什么问题吗？我不确定是否要使用示例中所示的 #content id。

Answer 1

您遇到了一些问题。

首先，正如其他人提到的，您仅在页面加载时运行脚本一次，而不是 binding to an event - 在本例中为下拉 change 事件。

其次，由于您的 HTML 代码没有任何 id 为 content 的元素，因此您的模式未显示(因为它被设置为显示 #content )。

顺便说一句，通过查看开发者控制台可以明显看出这一点。 popscript.js 会抛出错误，通过使用开发人员控制台中的工具，我能够快速发现问题。如果您不知道如何使用浏览器的开发者控制台，invest in learning how

这是一个Updated Fiddle ，以及更新后的代码:

脚本:

// Shorthand no-conflict safe document ready
jQuery(function($) {
  // Bind the "checkSelection" function to the change of the select dropdown
  $('#name').on('change', checkSelection);

  // The code you had, but put into a function so we can call when we want
  function checkSelection() {
    var dropdownSelectionItem = $("#name").val();
    console.log("Check:" + dropdownSelectionItem);

    if (dropdownSelectionItem == "First") {
      alert("Are you sure you want to select first option?");
      id_value = 1000;
    } else if (dropdownSelectionItem == "Second") {
      id_value = 2000;
    } else if (dropdownSelectionItem == "Third") {
      alert("Are you sure you want to select third option?");
      $('#content').confirmModal({
        topOffset: 0,
        onOkBut: function() {
          id_value = 3000;
        },
        onCancelBut: function() {},
        onLoad: function() {},
        onClose: function() {}
      });
    } else if (dropdownSelectionItem == "Fourth") {
      id_value = 4000;
    }
  }
});

HTML:

<select class="form-control" id="name">
  <option value="First">First</option>
  <option value="Second">Second</option>
  <option value="Third">Third</option>
  <option value="Fourth">Fourth</option>
</select>

<!-- Copied straight from the demo for the confirmModal script -->
<div style="display:none">
  <div id="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
    <div class="popModal_footer">
      <button type="button" class="btn btn-primary" data-popmodal-but="ok">ok</button>
      <button type="button" class="btn btn-default" data-popmodal-but="cancel">cancel</button>
    </div>
  </div>
</div>