javascript - jQuery if 语句中的多个条件

Question

我想连续(因为内容是通过 AJAX 接收的)检查类名称为 email 的输入是否存在，如果存在则显示类名称为 upload 的另一个输入，以及此输入是否存在以及类名称为 upload 的另一个输入是否存在。单击按钮的类名可以执行某些操作。

我已经设法连续检查带有电子邮件类名的输入是否存在，如果存在则显示带有上传类名的输入，但我不知道如何继续。

这是我到目前为止所拥有的:

(function(doc,found) {
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {

      var mydiv = doc.querySelector("input.email");

      if(found && !mydiv){
        // Was there but is gone, do something
        found = false;
        $('input.upload').hide();

      }

      if(mydiv){
        // Found it, do something
        found = true;
        $('input.upload').show();

      }

    });
});
observer.observe(doc, { childList: true, subtree: true });
})(document,false);

Answer 1

您正在使用 jQuery，但也使用 document.querySelector()。最好始终保持一致并使用 jQuery，或者直接使用 DOM 方法而不使用 jQuery。

使用.toggle()可以使显示/隐藏的代码更加简洁。

(function(doc) {
    var observer = new MutationObserver(function(mutations) {
        // You don't need to iterate over the mutations, 
        // and showing/hiding the upload input can be done with a one-liner:
        $('input.upload').toggle($("input.email").length>0);
    });
    observer.observe(doc, { childList: true, subtree: true });
    // Here is the click handler. It checks for the existence of the input.
    $('input.button').click(function() {
        if ($('input.email').length) {
            alert('There is an email input. We could do something.');
        } else {
            alert('No email input present');
        }
    });
})(document);

// Simulate a mutation that removes/adds an `input.email` control on button click
$('#toggle').click(function() {
    if ($('input.email').length) {
        $('input.email').remove();
    } else {
        $('<input class="email"  type="text">').insertBefore($('br')[0]);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Email:  <input class="email"  type="text"><br>
Upload: <input class="upload" type="file"><br>
<input class="button" type="button" value="button"><br>
<hr>
Click this button to trigger a mutation concerning email input:<br>
<button id="toggle">Create/Delete email input</button>

关于 MutationObserver 的警告

监听 MutationObserver 事件时必须小心。如果在事件处理程序中您进行了另一个突变，则会触发一个新事件，并且您可能会陷入无限循环。

即使上面的代码也存在风险:toggle 方法将更改元素的可见性，jQuery 将通过设置 display CSS 样式来实现这一点。但这是对文件的修改!因此，另一个突变事件被触发，并且 toggle 方法被再次调用。幸运的是，当 jQuery 发现可见性已正确设置时，它不会更改文档(第二次调用时就是这种情况)，因此不会触发进一步的突变事件。