Question

我的Html就是这样，

<div>
    <div>
        <input id="20171" name="StyleID" type="checkbox" value="true"><input name="StyleID" type="hidden" value="false">
    </div>
    <div class="imgContainer" style="padding-left: 3px; font-size: 18px; float:left;">
        <img src="http://localhost:61137/Images/8501.jpg" width="150px" height="150px">
    </div>
    <div>
        <span id="1002" class="ImagePlating"></span>
        <span id="1003" class="ImagePlating"></span>
        <span id="1004" class="ImagePlating"></span>
        <span id="1005" class="ImagePlating"></span>
    </div>    
</div>

...

<div >
    <div >
        <input id="20162" name="StyleID" type="checkbox" value="true">
        <input name="StyleID" type="hidden" value="false">
    </div>
    <div class="imgContainer" style="padding-left: 3px; font-size: 18px; float:left;">
        <img src="http://localhost:61137/Images/8498.jpg" width="150px" height="150px">
    </div>
    <div style="padding-left: 3px; font-size: 18px; float:left;">
        <span id="1002" class="ImagePlating"></span>
        <span id="1003" class="ImagePlating"></span>
        <span id="1004" class="ImagePlating"></span>
        <span id="1005" class="ImagePlating"></span>
        <span id="1006" class="ImagePlating"></span>
        <span id="1007" class="ImagePlating"></span>
    </div>
</div>

点击该范围后，我正在尝试使用类＆＃34; imgContainer＆＃34;更改div的源代码，同时尝试使用以下Jquery获取父div的复选框ID。 / p>

$(".ImagePlating").on("click", function (e) {
  $(this).parent()
         .sibilings()
         .find('.imgContainer')
         .child()
         .attr("src", "http://localhost:61137/Images/Img-Loading.gif");
  var id = $(this).parent()
                  .find('input[type='checkbox']')
                  .attr('id');
});

但是我不知道如何使用JQuery实现这一点，我尝试的上面的Jquery看起来错了。

Answer 1

尝试以下代码：使用parent()获取父div，然后使用prev()查找包含class="imgContainer"的上一个元素并更改src。使用相同的$imageContainer和prev（）来查找复选框。

同时使用type="checkbox"

的双引号

$(".ImagePlating").on("click", function (e) {
  var $imageContainer = $(this).parent().prev('.imgContainer');
  $imageContainer.find('img').attr("src", "http://localhost:61137/Images/Img-Loading.gif");
  var id = $imageContainer.prev().find('input[type="checkbox"]').attr('id');
});

Answer 2

你可以这样使用

$(".ImagePlating").click(function () {
     $(this).parent().prev().find("img").attr("src", "new src");

});

.prev()将选择正上方的元素。然后使用find()你可以找到孩子们。

Answer 3

使用

$(".ImagePlating").on("click", function (e) {
  $(this).parent()
         .prev('.imgContainer') //Image container is not a sibling
         .find('img')
         .attr("src", "http://localhost:61137/Images/Img-Loading.gif");
  var id = $(this).parent()
                  .find('input[type='checkbox']')
                  .attr('id');
});

Jquery获取父div图像源

3 个答案: