Question

我有一个名为＆＃34;数组＆＃34;包含7张图片。它们应显示在如下定义的网格中：

<div class="container">
  <div class="row" id="g-work">
  </div><!-- / row -->
</div><!-- / container -->

现在在JS我正在填补/替换＆＃34;工作＆＃34;用这些图像然后我想把边框变成红色。但是，我真的不明白如何正确选择它们。这应该是正确的代码，但似乎没有用。这$("#g-work img)在做什么？ #g-work中没有图片代码。这是什么意思？为什么不能写var images=works？如果我尝试下面的代码，我的开发人员工具甚至告诉我图像没有定义。这有什么问题？

for(var i = 0; i < works.length; ++i ) {
  $("#g-work").append("\
    <div class='col-sm-6 col-md-3'>\
      <img class='img-responsive' src='" + works[i] + "'>\
    </div>\
  ");

  var images = $("#g-work img"); 
  $(images[i]).css("border", "2px red");
};

Answer 1

＆＃13;

works=["http://www.cutestpaw.com/wp-content/uploads/2016/02/s-That-look.jpg","http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg"]
 
 $.each(works,function(key,value)
 {
   let DIV=$("<div/>",{class:"col-sm-6 col-md-3"});
   let Image=$("<img/>",{class:"img-responsive",src:value,style:"border:solid 2px red;margin-bottom:5px"});
   $(DIV.append(Image)).appendTo("#g-work");
 });

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row" id="g-work">
  </div><!-- / row -->
</div><!-- / container -->

＆＃13;

Answer 2

好的喜欢问题的根源，我相信，但我不明白为什么会出现这个问题。如果选择＆＃34; 2px固体鲑鱼＆＃34;作为边框颜色，它可以工作，但如果我采取＆＃34; 2px红色＆＃34;或＆＃34; 2px ffffff＆＃34;，它没有。

＆＃13;

var works=["http://www.cutestpaw.com/wp-content/uploads/2016/02/s-That-look.jpg","http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg"]



for(var i = 0; i < works.length; ++i ) {
  $("#g-work").append("\
    <div class='col-sm-6 col-md-3'>\
      <img class='img-responsive' src='" + works[i] + "'>\
    </div>\
  ");
  var images = $("#g-work img");
  
  
$(images[i]).css("border", "2px solid salmon");
//$(images[i]).css("border", "2px red");

};

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <div class="row" id="g-work">
  </div><!-- / row -->
</div><!-- / container -->

＆＃13;

如何使用JS / jQuery

2 个答案: