Question

我想将值设置为隐藏的输入字段，具体取决于添加到document.ready上的父元素的类。我的文件中有以下PHP和jQuery代码：

<?php
foreach($attributeOptions as $value) { ?>
    <div id="js-button" class="jarsettings-button <?php checkIfSelected($value['value'], $_settings) ?>">
        <?= $value['label']; ?>
        <input type="hidden" value="" id="cb-<?= $value['value']; ?>" name="js-cb" />
    </div>
    <?php } ?>

这里发生的是脚本检查以前声明的函数，必须添加到 checkIfSelected（）的元素的类是活动或非活性即可。如果数据库告诉我们这个特定元素必须在页面加载时是活动的，那么它将是“活动的”，反之亦然。

我的jQuery看起来像这样：

<script type="text/javascript">
    jQuery(document).ready(function($){

            if( jQuery('#js-button').hasClass('active') ) {
                jQuery(this).find('input').val('1');
            } else if ( jQuery('#js-button').hasClass('inactive') ){
                        jQuery(this).find('input').val('0');
            }

        jQuery('.jarsettings-button').click(function(){             
            jQuery(this).fadeToggle(150).toggleClass('active');
            jQuery(this).fadeToggle(150).toggleClass('inactive');

            if( jQuery(this).hasClass('active') ){
                jQuery(this).find('input').val('1');
            } else if ( jQuery(this).hasClass('inactive') ){
                jQuery(this).find('input').val('0');
            }   
        })
    })      
</script>

我希望每个字段的值为0（在前声明的非活动类上）或1（如果是活动类）。如果单击一个元素，则检查本身有效，但对于所有输入字段，我仍然只得到value =“1”，但是添加了哪个类。我首先在jQuery（.jarsetings-button）中尝试了类id，但它还没有工作。我将其更改为ID，现在仍然可以检测到该值。

我在这里做错了什么？

提前致谢！

Answer 1

您可以尝试使用以下代码：

<script type="text/javascript">
jQuery(document).ready(function($){
        jQuery('.jarsettings-button').each(function(){
            var parent = jQuery(this);
            if(  parent.hasClass('active')) {
                jQuery(parent).find('input').val('1');
            } else if ( parent.hasClass('inactive') ){
                jQuery(parent).find('input').val('0');
            }
        });


    jQuery('.jarsettings-button').click(function(){             
        jQuery(this).fadeToggle(150).toggleClass('active');
        jQuery(this).fadeToggle(150).toggleClass('inactive');

        if( jQuery(this).hasClass('active') ){
            jQuery(this).find('input').val('1');
        } else if ( jQuery(this).hasClass('inactive') ){
            jQuery(this).find('input').val('0');
        }   
    })
})

第一个if...else部分

错过了

如果click部分; this引用指向已执行单击操作的元素，因此该部分是正确的。

Answer 2

以上代码仅适用于第一个元素，因为您复制了ids中的foreach。所以我想说，更好的是，移除id [或者无论如何动态创建唯一ID] 并使用class上的document.ready引用元素，如下所示：< / p>

jQuery(document).ready(function($){
   jQuery('.jarsettings-button').each(function(){
         //use ternary operation
         var val=jQuery(this).hasClass('active')?1:0;
         jQuery(this).find('input').val(val);

   });
  //click event here
});

在父元素

2 个答案: