javascript - 从不相关的 div 中查找属性 .on ("click")

Question

我试图在单独按下 "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>

Answer 1

.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")。