Question

我需要一些帮助来为所有元素应用 js 代码，但现在仅适用于每个页面的第一个。

页面上是带有购买按钮的项目，这是由脚本创建的，因此所有按钮都具有相同的 ID，但不仅仅是其中一个 - 而且我无法应用在某些情况下禁用按钮的脚本，仅适用于第一个按钮.

    <?php $elem = getElement('button_basket'); ?>
    <button disabled = "true" onclick = "checkInput(event)" id="b1" class="btn btn-warning btn-lg btn-block tobasket <?php echo $elem['content_tr'] ?>" product_id="<?php echo $v['id']; ?>" name="<?php echo $prdata['full_name'] ?>" nametr="<?php echo $prdata['name1_tr'] ?>" url="<?php echo $cur_url; ?>catalog/<?php echo $v['img_url']; ?>" price="<?php echo $v['price']; ?>" <?php if($v['sold']==1) echo 'sold="true"'; ?>><?php echo $elem['content'] ?></button>
    <?php $elem = getElement('button_oneclick'); ?>
    <p class="prod-oneclick <?php echo $elem['content_tr'] ?>" <?php if($v['sold']==1) echo 'sold="true"'; ?>><?php echo $elem['content'] ?></p>
    <script type="text/javascript">
    function checkInput(event){

    
    <?php
$cookie_basket = $_COOKIE['basket'];    
$tempo = urlencode($cookie_basket);
$countChars = mb_strlen($tempo);
//echo $countChars;
    ?>
let test = '<?php echo $countChars;?>';
let btncheck = document.querySelectorAll('[disabled]');
//      var step;
//      for (step = 0; step < 5; step++) {
if (test > 80){
  document.getElementById("b1").disabled = true;
}else{
  document.getElementById("b1").disabled = false;
}
    }
//  window.onload = checkInput(event);
//  }
</script>

如有需要可提供整页脚本。

Answer 1

你应该使用数据属性和委托

您的脚本也可以大大简化

let test = '<?php echo $countChars;?>';

window.addEventListener("load", function() {
  [...document.querySelectorAll('[disabled]')].forEach(btn => btn.disabled = test > 80)
});

<?php
$cookie_basket = $_COOKIE['basket'];    
$tempo = urlencode($cookie_basket);
$countChars = mb_strlen($tempo);
?>

  <button disabled class="btn btn-warning btn-lg btn-block tobasket <?php echo $elem['content_tr'] ?>" data-product_id="<?php echo $v['id']; ?>" name="<?php echo $prdata['full_name'] ?>" data-nametr="<?php echo $prdata['name1_tr'] ?>" data-url="<?php echo $cur_url; ?>catalog/<?php echo $v['img_url']; ?>"
    data-price="<?php echo $v['price']; ?>" <?php if($v[ 'sold']==1) echo 'data-sold="true"'; ?>><?php echo $elem['content'] ?></button>

  <p class="prod-oneclick <?php echo $elem['content_tr'] ?>" <?php if($v[ 'sold']==1) echo 'data-sold="true"'; ?>>
    <?php echo $elem['content'] ?>
  </p>

Answer 2

对我来说完全有效的最终代码是：

<script>
function beCheerful() {
<?php
$cookie_basket = $_COOKIE['basket'];    
$tempo = urlencode($cookie_basket);
$countChars = mb_strlen($tempo);
?>  
let test = '<?php echo $countChars;?>';
window.addEventListener("DOMContentLoaded", function() {
  [...document.querySelectorAll('[disabled]')].forEach(btn => btn.disabled = test > 80)
});

}
for (var i = 0; i < 1; i++) {
    beCheerful();
}
window.onload = beCheerful;
</script>

JS 仅适用于第一个元素

2 个答案: