Question

https://jsfiddle.net/The95Chaps/2L4t9saq/92/是我的代码

var createGrid=function(s,i,a,e){for(var r=1;r<i+1;r++){for(var c="<span class='inline'>",n=1;n<s+1;n++){c=c+"<div class='pixels' x='"+n+"' y='"+r+"'></div>"}c+="</span>",$("#main").append(c)}$(".pixels").css("background-color","gray"),$(".pixels").css("width",a),$(".pixels").css("height",e)};
var modGrid = function(code){
    for(var n=1;n<gridx+1;n++){
        for(var i = 1; i<gridy+1; i++){
        $("[x="+i+"]")
    }
    }
}
var gridx = 64
var gridy = 64
createGrid(gridx,gridy,1,1)

。

<div canvas="canvas" id="main"></div>

。

.inline { display: block }
.pixels { display: inline-block }
#main {
  font-size:0;
}

只需忽略第一行，它所做的就是创建数组

所以目前它创建了一个64 x 64的网格，每个像素大小为1像素，像素总数为4096像素

在我的modGrid()函数中，它将能够接收JS数组，然后将其转换为图像，但是我在使用jquery选择器时遇到了麻烦。

目前，我知道如何选择具有特定属性的元素的唯一方法是使用$("thing[attribute=blah]").somefunction();，而我只是想知道

因为我要通过2个属性（x和y）进行选择，我该怎么做？：

在for(var i){};循环内，它应该能够选择属性x等于i的像素 和属性y等于n的像素，并将选定的像素颜色更改为蓝色，使用 $(selector[x=yada and y=yada).css("background-color","blue");

Answer 1

您不能一次使用两个属性选择器。

但是您可以做的是使用一个...因此您得到了一组匹配的元素。在此集合中，只需找到一个与第二个属性也匹配的对象即可。

将执行.each()循环。

var createGrid=function(s,i,a,e){for(var r=1;r<i+1;r++){for(var c="<span class='inline'>",n=1;n<s+1;n++){c=c+"<div class='pixels' x='"+n+"' y='"+r+"'></div>"}c+="</span>",$("#main").append(c)}$(".pixels").css("background-color","gray"),$(".pixels").css("width",a),$(".pixels").css("height",e)};
var modGrid = function(code){
    for(var n=1;n<gridx+1;n++){
        for(var i = 1; i<gridy+1; i++){
        $("[x="+i+"]")
    }
    }
}
var gridx = 64
var gridy = 64
createGrid(gridx,gridy,1,1)

// To target the pixel at (10,10)
$("[y='10']").each(function(){
  if($(this).is("[x='10']")){
    $(this).css("background-color","blue");
  }
});

.inline { display: block }
.pixels { display: inline-block }
#main {
  font-size:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div canvas="canvas" id="main"></div>

在jquery中选择具有两个属性的元素

1 个答案: