Question

我知道这是一个简单的问题，但我找不到解决方案..我有以下div结构..

<div id="myid">
  <div id="toggle">
    <img id="img" src="test_img.jpg" width="300" height="200">
  </div>
</div> 

<script>
$("#myid").mouseenter(function() {
$("#toggle").css("background-image", "url(test_img_b.jpg)");
$('#myid').children().animate({width: "0px", marginLeft: 0, opacity:0}, 'slow',   function() {$(this).remove();});
});
</script>

代码工作正常，问题是我不想通过名称引用“#toggle”div，我希望通过子属性或类似的东西进行访问。因为我将拥有许多“#myid”div块，并希望“#toggle”div动画取决于哪个div悬停......

我希望我明白我的问题。

谢谢你 - 马林德

谢谢大家，我已经根据你的建议改变了我的范围，并在第一时间实现了我想要的。

此致 Malind

Answer 1

Id元素必须是唯一的，因此您不能拥有多个具有相同ID的元素 - 而不是使用类

<div class="myid">
  <div class="toggle">
    <img class="img" src="test_img.jpg" width="300" height="200">
  </div>
</div>

然后

$(".myid").mouseenter(function () {
    $(this).find(".toggle").css("background-image", "url(test_img_b.jpg)");
    $(this).find('.img').animate({
        width: "0px",
        marginLeft: 0,
        opacity: 0
    }, 'slow', function () {
        $(this).remove();
    });
});

演示：Fiddle

Answer 2

试试这个：

$("#myid div")

指的是#mydiv

中的所有div

但实际上你接近错了。你只能有一个唯一的id，但是有多个类。所以选择类，而不是id。

<div class="parent" id="myid">
  <div class="toggle">
    <img id="img" src="test_img.jpg" width="300" height="200">
  </div>
</div> 

<script>

$("#myid").mouseenter(function() {
    var $this = $(this);
    $('.toggle', $this) //here you are setting the scope to the div you are entering
        .css("background-image", "url(test_img_b.jpg)")
        .animate({
            width: "0px", 
            marginLeft: 0, 
            opacity:0
         }, 'slow');
}), function() {
    var $this = $(this);
    $('.toggle', $this)
        .animate({
             width: "0px", 
             marginLeft: 0, 
            opacity:0
        }, 'slow', function() {
             $(this).remove();
    });
});
</script>

你可以做$（'＃myid'）。find（'。toggle'）但是它效率低下，你应该首先定义你的范围，然后应用它。 var $ id = $（'＃myid'）;然后可以反复使用$（'。toggle'，$ id）和范围，而不必反复使用.find（）。

如何在jquery中引用子元素

2 个答案: