javascript - 有没有办法检查 div 是否包含 img，然后将其用作 onclick 事件的条件？

Question

所以，我知道这个问题可能听起来与许多其他问题非常相似，但我已经尝试了很多类似问题的其他解决方案，但它们似乎不起作用。也许我只是解释得不好，但我已经尝试了很多。

基本上，我想根据 div 是否已包含图像将图像移动到不同的 div。

我已经尝试了多种不同的方法来检查具有特定 id 的 div 是否包含 img .has()、.contains() 等，并且没有骰子。我不确定这只是语法问题还是什么问题。

HTML

    <div id="imgsDiv">
        <img src="assets/images/peas.jpeg" id="peas" class="imgStyles" alt="peas">
        <img src="assets/images/broccoli.jpeg" id="broccoli" class="imgStyles" alt="broccoli">
    </div> 

<div id="playerDiv">
        </div>

        <div id="computerDiv">
        </div>

jQuery/JS

$(".imgStyles").click(function (event) {
    if ($("#playerDiv:contains('img')")) {
        $(event.currentTarget).appendTo("#computerDiv");
        console.log("sucess");
    } else {
        $(event.currentTarget).appendTo("#playerDiv"); 
    }
})

基本上，我希望能够单击任何图像并将第一个图像转到#playerDiv，然后将之后单击的所有其他图像转到#computerDiv。现在，所有图像都只是将自己附加到 #computerDiv，即使 #playerDiv 开头没有图像。

Answer 1

您可以使用.length ^{jQuery对象中的元素数量}

• if ($("#playerDiv").find("img").length)表示div中是否有img..如果div包含任何img则返回true..

• 还有if ($("#playerDiv").find("img").length > 0)与上一篇相同。 0这是元素的数量

• 尝试console.log($("#playerDiv").find("img").length)你就会明白了..

• if ($("#playerDiv").has("img"))应该也可以工作，但是当你说并将第一张图像转到#playerDiv时，这样你就可以使用if ($("#playerDiv").find("img").length == 1)

$(".imgStyles").on('click' , function (event) {
    if ($("#playerDiv").find('img').length == 1) {
        $(this).appendTo("#computerDiv");
        console.log("To computerDiv");
    } else {
        $(this).appendTo("#playerDiv");
        console.log("To playerDiv");
    }
})

#playerDiv{
  background : red;
}
#computerDiv{
  background : yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="imgsDiv">
<img src="assets/images/peas.jpeg" id="peas" class="imgStyles" alt="peas">
<img src="assets/images/broccoli.jpeg" id="broccoli" class="imgStyles" alt="broccoli">
<img src="assets/images/peas.jpeg" id="peas" class="imgStyles" alt="peas">
<img src="assets/images/broccoli.jpeg" id="broccoli" class="imgStyles" alt="broccoli">

</div> 

<div id="playerDiv"></div>

<div id="computerDiv"></div>

• 以及关于使用 .contains ^{选择包含指定文本的所有元素。} .. 所以它不适用于它适用于文本的元素

最后:如果您需要防止再次附加附加图像，您可以通过向附加图像添加一个类并使用 :not 来实现此目的。选择器

$(document).on('click' , ".imgStyles:not(.appended)" ,function (event) {
    if ($("#playerDiv").find('img').length == 1) {
        $(this).addClass('appended').appendTo("#computerDiv");
        console.log("To computerDiv");
    } else {
        $(this).addClass('appended').appendTo("#playerDiv");
        console.log("To playerDiv");
    }
})

#playerDiv{
  background : red;
}
#computerDiv{
  background : yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="imgsDiv">
<img src="assets/images/peas.jpeg" id="peas" class="imgStyles" alt="peas">
<img src="assets/images/broccoli.jpeg" id="broccoli" class="imgStyles" alt="broccoli">
<img src="assets/images/peas.jpeg" id="peas" class="imgStyles" alt="peas">
<img src="assets/images/broccoli.jpeg" id="broccoli" class="imgStyles" alt="broccoli">

</div> 

<div id="playerDiv"></div>

<div id="computerDiv"></div>