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

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

Answer 2

您需要将$(this)更改为$(.btn1) 点击的按钮$(this)适用于.btn1而不适用于.btn2，将其从动态$(this)更改为始终在.link中查找.btn1解决它。

Answer 3

您是否尝试过使用$（this）.parent（）。find（＆＃34; .title＆＃34;）。你可以向上移动heirarchy并从那里获取元素然后

$("#container").on("click", ".item", function() {
  $("#title").text($(this).parent().find(".title").text());
  var itemImgSrc = $(this).parent().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>

还尝试使用find方法的索引。它返回一个数组，但我不认为只有一个元素时需要给索引。

像这样的事情 $（这）.parent（）找到（＆＃34; .item＆＃34;）[0]的.text（）;

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

3 个答案: