主页 / 问题 / 1014379
Accepted
Sturmer
Asked:2020-08-17 04:02:52 +0000 UTC2020-08-17 04:02:52 +0000 UTC

如何以编程方式单击动态无线电输入

  • 772

大家好！

页面上有这段代码：

<ul class="c-order__payment payment-details-list"><li class="noneactive">
    <label class="noneactive">
        <input type="radio" name="payment" rel="" value="4">Наличные (курьеру)  </label>
    <span class="icon-payment-4"></span>
    <span class="rate-payment"></span>
</li><li class="noneactive">
    <label class="noneactive">
        <input type="radio" name="payment" rel="" value="2">Яндекс.Деньги   </label>
    <span class="icon-payment-2"></span>
    <span class="rate-payment"></span>
</li></ul>

代码是在页面加载后生成的。生成代码后如何以编程方式单击第一个单选按钮？我试过这个，它没有点击：

setTimeout(ClickPayment, 2000);     


  function ClickPayment() {         
        $(".rate-payment:first").click();               
   }

像这样尝试：

setTimeout (ClickPayment, 1000);        

  function ClickPayment() {
     $(".rate-payment:first").closest(".noneactive").find("input[type=radio]").click();
  //$(".rate-payment:first").closest(".noneactive").find("input[type=radio]").attr('checked',true);
    alert ("test");
}

不点击。我尝试了注释掉的版本，它没有检查。

现在我尝试这样：

$(document).ready(function() {
  $('span.deliveryName:first').click();
  setTimeout(ClickPayment, 1000);
  
  $("#container").append(
  `
  <div class="noneactive">div
  <input type="radio"/>
  <span class="rate-payment">span</span>
  </div>
  `
  );
});

function ClickPayment() {
  var item = $(".rate-payment:first").closest(".noneactive").find("input[type=radio]");
  console.log("ClickPayment: count =", item.length);
  item[0].click();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>

它就是这样工作的。控制台响应：ClickPayment：count = 1。这是 Item 内部的样子：

r.fn.init(1)
0: input
length: 1
prevObject: r.fn.init [li.noneactive, prevObject: r.fn.init(1)]
__proto__: Object(0)

提前致谢！

javascript

2 个回答

  1. Best Answer

    按钮是否是动态的并不重要。最主要的是它在调用函数的那一刻就存在。

    setTimeout(ClickPayment, 1000);

function ClickPayment() {
  $(".rate-payment:first").closest(".noneactive").find("input[type=radio]").click();
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="c-order__payment payment-details-list">
  <li class="noneactive">
    <label class="noneactive">
        <input type="radio" name="payment" rel="" value="4">Наличные (курьеру)  </label>
    <span class="icon-payment-4"></span>
    <span class="rate-payment"></span>
  </li>
  <li class="noneactive">
    <label class="noneactive">
        <input type="radio" name="payment" rel="" value="2">Яндекс.Деньги   </label>
    <span class="icon-payment-2"></span>
    <span class="rate-payment"></span>
  </li>
</ul>

    例如，像这样：

    $('input').on('mouseover', function () { 
  alert(JSON.stringify(
      $(".rate-payment:first").closest(".noneactive").find("input[type=radio]").ClassName
  ));
  alert(JSON.stringify($("span.rate-payment:first").className)); 
});

    Javascript 语言区分大小写。它包含ClassName不同的className东西。但这不是本案的主要内容。函数返回的对象$(...)既没有属性ClassName也没有属性className。

    console.log(
  $(".rate-payment:first").closest(".noneactive").find("input[type=radio]").attr("class")
);
console.log($("span.rate-payment:first").attr("class"));

    我怎样才能调用一个元素

    console.log($("span.rate-payment:first").length > 0? "exists" : "does not exist");

    setTimeout (ClickPayment, 1000);        

function ClickPayment() {
  var item = $(".rate-payment:first").closest(".noneactive").find("input[type=radio]");
  console.log("ClickPayment: count =", item.length);
  item.click();
}

    控制台中有什么？

    • 3

  2. 也许最初将它（单选按钮）滑入支票更容易？<input type="radio" name="payment" rel="" value="4" checked>

    $(document).ready(function () {
  let content = '<ul class="c-order__payment payment-details-list"><li class="noneactive"><label class="noneactive"><input type="radio" name="payment" rel="" value="4" checked />Наличные (курьеру)</label><span class="icon-payment-4"></span><span class="rate-payment"></span></li><li class="noneactive"><label class="noneactive"><input type="radio" name="payment" rel="" value="2" />Яндекс.Деньги</label><span class="icon-payment-2"></span><span class="rate-payment"></span></li></ul>';
  $('body').append(content);
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    • 0

相关问题