从不相关的div中查找属性.on（“ click”）

凯尔·安德希尔（Kyle Underhill）

我试图将其放置在"btn1"单独按侧栏的位置。我试过了，$("#container").on("click", ".btn1", function()但是没有用。

$("#container").on("click", ".item", function() {
  $("#title").text($(this).find(".title").text());
  var itemImgSrc = $(this).find(".image").attr("src");
  $("#image")
    .css("background-image", 'url("' + itemImgSrc + '")')
    .css("background-repeat", "no-repeat");
});

#container {
  display: flex;
  height: 100px;
}
.image {
  height: 100px;
}
#image {
  height: 100px;
}

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

<div id="container">
  <!-- Item 1 -->
  <div class="item">
    <button class="btn1"></button>
    <div class="title">Dog</div>
    <img class="image" src="http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg">
  </div>
  <!-- Item 2 -->
  <div class="item">
  <button class="btn1"></button>
    <div class="title">Cat</div>
    <img class="image" src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx">
  </div>
  <!-- Sidebar Div -->
</div>
  <div class="modal">
    <h2 id="title"></h2>
    <div id="image"></div>
  </div>

巴尔玛

.title并且.image不包含在中.btn1。您需要转到包含容器.item，然后找到它们。

$("#container").on("click", ".btn1", function() {
  var item = $(this).closest(".item");
  $("#title").text(item.find(".title").text());
  var itemImgSrc = item.find(".image").attr("src");
  $("#image")
    .css("background-image", 'url("' + itemImgSrc + '")')
    .css("background-repeat", "no-repeat");
});

#container {
  display: flex;
  height: 100px;
}
.image {
  height: 100px;
}
#image {
  height: 100px;
}

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

<div id="container">
  <!-- Item 1 -->
  <div class="item">
    <button class="btn1"></button>
    <div class="title">Dog</div>
    <img class="image" src="http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg">
  </div>
  <!-- Item 2 -->
  <div class="item">
  <button class="btn1"></button>
    <div class="title">Cat</div>
    <img class="image" src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx">
  </div>
  <!-- Sidebar Div -->
</div>
  <div class="modal">
    <h2 id="title"></h2>
    <div id="image"></div>
  </div>

您也可以使用$(this).siblings(".title')和$(this).siblings(".image")。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。