Question

我有一个包含属性row的6个div的网格，这两个div在两个具有属性col的div之间平均嵌套。当页面加载时，我想随机选择其中一行并应用类.show，因此row="1"的两个div都是一个row。从这里开始，当单击文档时，我希望随机选择其余两行中的一行，并将类.show应用于它。再次点击文档时，显示的最后一个row已应用.show。现在，所有三个row都拥有类.show。如果再次单击文档，则应重新启动视觉循环，以便只有一个随机选择的div具有类.show。

到目前为止，我已使用代码创建了jsfiddle。我能解决的问题是如何选择具有相同row属性的div。

<div id="cnt">
    <div col=0>
        <div row="0">0</div>
        <div row="1">1</div>
        <div row="2">2</div>
    </div>
    <div col=1>
        <div row="0">0</div>
        <div row="1">1</div>
        <div row="2">2</div>
    </div>
</div>

JS

$(document).ready(function() {

function selectDiv(){
   var notSelectedDivs = $("div[row]:not(.show)");

   if(!notSelectedDivs.length){
       $('.show').removeClass('show');
       notSelectedDivs = $("div[row]:not(.show)");
   }
   var randomIndex = Math.floor((Math.random() * 3));
   $(notSelectedDivs).attr('row', randomIndex).addClass('show');
}


$(document).on("click", function() {
    selectDiv();
});
selectDiv();
});

Answer 1

可以使用jQuery选择器[row=value]找到包含行的div。因此使用随机索引：$('div[row=' + randomIndex + ']')

快速示例（示例中为硬编码的行的上限）：fiddle

编辑示例实施：

$(document).ready(function() {

let rowDivs = $('div[row]');

function selectDiv(){	 
   let notSelectedDivs = rowDivs.not('.show');
   
   if(!notSelectedDivs.length)
       notSelectedDivs = rowDivs.removeClass('show');
   
   var randomIndex = notSelectedDivs.get(Math.floor((Math.random() * notSelectedDivs.length))).getAttribute('row');
   $('div[row=' + randomIndex + ']').addClass('show');
}


$(document).on("click", function() {
    selectDiv();
});
selectDiv();
});

#cnt {
  display: flex;
}
div[row] {
  width: 20px;
  border: 1px solid black;
}
.show {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cnt">
        <div col=0>
            <div row="0">0</div>
            <div row="1">1</div>
            <div row="2">2</div>
        </div>
        <div col=1>
            <div row="0">0</div>
            <div row="1">1</div>
            <div row="2">2</div>
        </div>
    </div>

从Jquery对象中选择具有相同属性的div

1 个答案: