Question

我有以下标记：

<footer class="form__footer">
     <div class="form__actions">
       <div class="form__action form__action--primary">
           <button class="button button--chevron-right button--primary" 
                   name="next" 
                   type="submit" 
                   value="Next">Next
            </button>
       </div>
       <div class="form__action form__action--secondary">
              <button class="button button--chevron-left button--standout" 
                      name="back" 
                      type="submit" 
                      value="Previous">Previous
             </button>
       </div>
    </div>
</footer>

当下拉列表的值更改时，我想显示/隐藏下一个按钮。以下引发jquery语法错误：Syntax error, unrecognized expression: button, input[type='submit', name='next']

$( "footer.form__footer" ).find("button, input[type='submit', name='next']").hide();

以下内容隐藏了两个按钮：

$( "footer.form__footer" ).find("button, input[type='submit'][ name='next']").hide();

仅隐藏下一个按钮的正确语法是什么？

Answer 1

当您有按钮时为什么要引用输入，请使用：

$( "footer.form__footer" ).find("button[name='next']").hide();

setTimeout(function() {
  $("footer.form__footer").find("button[name='next']").hide();
}, 500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<footer class="form__footer">
  <div class="form__actions">
    <div class="form__action form__action--primary">
      <button class="button button--chevron-right button--primary" name="next" type="submit" value="Next">Next
            </button>
    </div>
    <div class="form__action form__action--secondary">
      <button class="button button--chevron-left button--standout" name="back" type="submit" value="Previous">Previous
             </button>
    </div>
  </div>
</footer>

Answer 2

没关系，我已经知道了：

$( "footer.form__footer" ).find("button[name='next']").hide();

Answer 3

我假设您正在尝试从DOM中找到button或input元素。您可以尝试以下方法。这将从目标容器中隐藏匹配的元素

$( "footer.form__footer" ).find("button[type='submit'][ name='next'], input[type='submit'][ name='next']").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer class="form__footer">
     <div class="form__actions">
       <div class="form__action form__action--primary">
           <button class="button button--chevron-right button--primary" 
                   name="next" 
                   type="submit" 
                   value="Next">Next
            </button>
       </div>
       <div class="form__action form__action--secondary">
              <button class="button button--chevron-left button--standout" 
                      name="back" 
                      type="submit" 
                      value="Previous">Previous
             </button>
       </div>
    </div>
</footer>

Answer 4

由于您的按钮仅包含特定单词，因此您也可以使用:contains选择器来仅隐藏包含单词buttons的{{1}}：

Next

$("footer.form__footer button:contains('Next')").hide();

jQuery-查找元素并显示或隐藏

4 个答案: