Question

<div class="pay-way">

<div class="pay-way-menu" id="pay1">
<input type="radio" name="pay-way" value="credit">
<img src="images/credit.png" width="45" height="45" alt=""/><div class="pay-word"></div></div>

<div class="pay-way-menu" id="pay2">
<input type="radio" name="pay-way" value="convenience">
<img src="images/convenience.jpg" width="125" height="35" alt=""/><div class="pay-word"></div></div>

<div class="pay-way-menu" id="pay3">
<input type="radio" name="pay-way" value="atm">
<img src="images/atm.png" width="45" height="45" alt=""/><div class="pay-word"></div></div>

</div>

如何只点击一个并隐藏其他选项？我刚刚开始学习，并且对此没有任何想法非常感谢你

Answer 1

您可以使用hide隐藏元素。您还可以使用.not忽略当前点击的元素。

$('.pay-way-menu').not(this).hide();

以下是相同的示例：

＆＃13;

$('.pay-way-menu').on('click', function(){
  $('.pay-way-menu').not(this).hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="pay-way">

  <div class="pay-way-menu" id="pay1">
    <input type="radio" name="pay-way" value="credit">
    <img src="images/credit.png" width="45" height="45" alt="" />
    <div class="pay-word"></div>
  </div>

  <div class="pay-way-menu" id="pay2">
    <input type="radio" name="pay-way" value="convenience">
    <img src="images/convenience.jpg" width="125" height="35" alt="" />
    <div class="pay-word"></div>
  </div>

  <div class="pay-way-menu" id="pay3">
    <input type="radio" name="pay-way" value="atm">
    <img src="images/atm.png" width="45" height="45" alt="" />
    <div class="pay-word"></div>
  </div>
</div>

＆＃13;

参考

Answer 2

使用$(document).ready(function () { // attach click handler to all pay-way-menu $(document).on("click", ".pay-way-menu", function() { // hide all $('.pay-way-menu').hide(); // show this $(this).show(); }); });，您可以执行以下操作：

emrfs delete s3://bucket/folder

但是，您需要考虑如何让用户改变主意。

Answer 3

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $(document).on("click", ".pay-way-menu", function() {
       // hide all expect thie current one
       $('.pay-way-menu').not(this).hide();
    });
});
</script>
</head>
<body>
<div class="pay-way">

<div class="pay-way-menu" id="pay1">
<input type="radio" name="pay-way" value="credit">
<img src="images/credit.png" width="45" height="45" alt=""/><div class="pay-word"></div></div>

<div class="pay-way-menu" id="pay2">
<input type="radio" name="pay-way" value="convenience">
<img src="images/convenience.jpg" width="125" height="35" alt=""/><div class="pay-word"></div></div>

<div class="pay-way-menu" id="pay3">
<input type="radio" name="pay-way" value="atm">
<img src="images/atm.png" width="45" height="45" alt=""/><div class="pay-word"></div></div>

</div>

</body>
</html>

JS。如何隐藏不是onclick的选项？需要像display：none

3 个答案:

参考