Question

在HTML＆amp; JS点击“搜索内容”即可获得“从城市代码”到“城市代码”。

不确定，为什么逻辑没有正确获得价值。它只获得第一次的价值。点击第二个'搜索内容'，我仍然得到第一个项目值。

任何人都可以建议解决这个问题的解决方案吗？

HTML：

<div class="search--container">
  <div class="title">Recent searches:</div>
  <div class="search-content">
    <div class="location">
      <div class="from-city--code">KUL</div>
      <div class="sep">-</div>
      <div class="to-city--code">HKG</div>
    </div>
    <div class="date">
      <div class="from-date" data-departdate="21 May 2017">21/05</div>
      <div class="sep">-</div>
      <div class="to-date" data-returndate="29 May 2017">29/05</div>
    </div>
  </div>
  <div class="search-content">
    <div class="location">
      <div class="from-city--code">MAS</div>
      <div class="sep">-</div>
      <div class="to-city--code">SIN</div>
    </div>
    <div class="date">
      <div class="from-date" data-departdate="14 Jun 2017">14/06</div>
      <div class="sep">-</div>
      <div class="to-date" data-returndate="21 Jun 2017">21/06</div>
    </div>
  </div>
  <div class="search-content">
    <div class="location">
      <div class="from-city--code">LDN</div>
      <div class="sep">-</div>
      <div class="to-city--code">ICN</div>
    </div>
    <div class="date">
      <div class="from-date" data-departdate="10 Apr 2017">10/04</div>
      <div class="sep">-</div>
      <div class="to-date" data-returndate="08 May 2017">08/05</div>
    </div>
  </div>
</div>

JS：

    $('.search-content').each(function () {
        $(this).on('click', function () {
            var $fromCityCode = $('.from-city--code').html();
            console.log($fromCityCode);
        });
    });

Answer 1

您需要将jquery修改为：

$('.search-content').click(function () {
  var $fromCityCode = $(this).find('.from-city--code').html();
  console.log($fromCityCode);
});

Answer 2

您应该find并直接设置click功能

$('.search-content').on('click', function () {
    var $fromCityCode = $(this).find('.from-city--code').html();
    console.log($fromCityCode);
});

Answer 3

您正在使用类选择器，除非您遍历集合，否则它将返回第一个元素。

只需更改

$（ '从城市代码'）

要

$（本）.find（ '从城市代码'）

希望这有帮助

Answer 4

使用find() method获取，建议.html()仅返回第一个元素的值，因此请勿单独使用.each()方法和控制台。

$('.search-content').on("click", function() {
  var a = $(this).find(".from-city--code").html();
  var b = $(this).find(".to-city--code").html();
  console.log(a + " " + b);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search--container">
  <div class="title">Recent searches:</div>
  <div class="search-content">
    <div class="location">
      <div class="from-city--code">KUL</div>
      <div class="sep">-</div>
      <div class="to-city--code">HKG</div>
    </div>
    <div class="date">
      <div class="from-date" data-departdate="21 May 2017">21/05</div>
      <div class="sep">-</div>
      <div class="to-date" data-returndate="29 May 2017">29/05</div>
    </div>
  </div>
  <div class="search-content">
    <div class="location">
      <div class="from-city--code">MAS</div>
      <div class="sep">-</div>
      <div class="to-city--code">SIN</div>
    </div>
    <div class="date">
      <div class="from-date" data-departdate="14 Jun 2017">14/06</div>
      <div class="sep">-</div>
      <div class="to-date" data-returndate="21 Jun 2017">21/06</div>
    </div>
  </div>
  <div class="search-content">
    <div class="location">
      <div class="from-city--code">LDN</div>
      <div class="sep">-</div>
      <div class="to-city--code">ICN</div>
    </div>
    <div class="date">
      <div class="from-date" data-departdate="10 Apr 2017">10/04</div>
      <div class="sep">-</div>
      <div class="to-date" data-returndate="08 May 2017">08/05</div>
    </div>
  </div>
</div>

单击此容器值的get get值

4 个答案: