根据具有特定类的每个 div 的不同数据属性值更改数据属性值

Question

我有几个 div，其中 data-resort 和 data-resortavail 通过复选框等进行操作。我想做的是，每当data-resort 或data-resortavail 发生变化时，它都会更新data-view。我在这里所拥有的显然不起作用，我对为什么感到困惑。任何帮助表示赞赏。

我收到了这条评论：

我不明白为什么您没有在点击时更新数据视图 事件。 “我想要做的是，每当数据度假村或 data-resortavail 更改，它更新数据视图..."。您正在设置 点击时的值，所以你知道你正在设置的值，你不需要 检查它们的函数。

希望这样可以更清晰。 简单的答案是，因为复选框不控制data-resortavail。但是，data-resortavail 是控制data-view 的一部分。我不想用复选框更改data-view，因为那样它不会给我我需要的东西。

复选框仅更改data-resort。 ajax 搜索控件data-resortavail。由于复选框控制data-resort，我需要更新data-view，等待data-resort 和data-resortavail 的值。

HTML

<div id="AKV-container" class="resortcontainer wdw" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="AKV2-container" class="resortcontainer wdw" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="AULV-container" class="resortcontainer ntp" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="BLT-container" class="resortcontainer wdw" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="BCV-container" class="resortcontainer wdw" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="BWALK-container" class="resortcontainer wdw" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="VWL-container" class="resortcontainer wdw" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="WCC-container" class="resortcontainer" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="GCAL-container" class="resortcontainer" data-resort="1" data-resortavail="1" data-view="1"></div>

工作复选框 (lackfindAttributes();)

jQuery(document).ready(function(){
    j$('.filterCheckBox').click(function() {
        if( j$(this).is(':checked')) {
            j$("."+this.value).attr('data-resort',1);
            j$("#"+this.value).attr('data-resort',1);
            attributeCount();
            findAttributes();
        } else {
            j$("."+this.value).attr('data-resort', 0);
            j$("#"+this.value).attr('data-resort', 0);
            attributeCount();
            findAttributes();
            }
        })
    })

我尝试根据其他两个属性data-resort 和data-resortavail 更改data-view

let findAttributes = function(response){
   j$('.resortcontainer').each(function(){
     let countavail = j$(this).data("resortavail");
     let countfilter = j$(this).data("resort");
     if (countavail == 1 && countfilter == 1) {
        j$(this).attr('data-view',1);
     }
     else {
        j$(this).attr('data-view',0);
     }
   })
}

Answer 1

这解决了我的问题。现在一切都相应地工作。我认为问题出在我的findAttributes() 上。我不相信它实际上是正确循环的。但是，这是我解决它的方法。

HTML 注意：网站上有很多“-container”id，所以我选择更改以-result-container 结尾的id。只是为了让查询更准确。

<div id="AKV-result-container" class="resortcontainer wdw" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="AKV2-result-container" class="resortcontainer wdw" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="AULV-result-container" class="resortcontainer ntp" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="BLT-result-container" class="resortcontainer wdw" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="BCV-result-container" class="resortcontainer wdw" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="BWALK-result-container" class="resortcontainer wdw" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="VWL-result-container" class="resortcontainer wdw" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="WCC-result-container" class="resortcontainer" data-resort="1" data-resortavail="1" data-view="1"></div>

<div id="GCAL-result-container" class="resortcontainer" data-resort="1" data-resortavail="1" data-view="1"></div>

允许我的复选框更改我的第一个数据属性的功能。

jQuery(document).ready(function(){
    j$('.filterCheckBox').click(function() {
        if( j$(this).is(':checked')) {
            j$("."+this.value).attr('data-resort',1);
            j$("#"+this.value).attr('data-resort',1);
            findAttributes();
            attributeCount();
        } else {
            j$("."+this.value).attr('data-resort', 0);
            j$("#"+this.value).attr('data-resort', 0);
            findAttributes();
            attributeCount();
            }
        })
    })

比较两个不同数据属性的功能。

let findAttributes = function(response){
 var resultcontainers =  document.querySelectorAll('[id$="-result-container"]');
 resultcontainers.forEach(function(resultcontainer){
      if (resultcontainer.dataset.resort == 1 && resultcontainer.dataset.resortavail == 1) {
        j$(resultcontainer).attr("data-view",1);
      }
      else{
        j$(resultcontainer).attr("data-view",0);
      }
 })
}