Question

我正在尝试学习JS和jQuery，而且我正在使用一个项目来完成这项工作。在过去的4个小时里，我一直在试图弄清楚如何做某件事，而且我完全卡住了。

基本上我想根据来自其他div的点击使用＆＃34; .blue＆＃34;上的HTML数据属性更新div的内容。我有价格和描述字段。无论我在哪里点击，我都设法从第一个div收集数据，但是根据我点击的DIV，我无法正确更新数据。

我尝试了多个$（this）关键字组合试图让这项工作成功，但无法弄明白。我已经搜索了这些论坛并发现了一些解决方案，但无法得到它，我认为我的想法太过分了。

这是我看过的那个：Update content in div, on click of another div

我确定这一定非常简单，但今天我无法理解。

这是我的代码：

＆＃13;

var upload = $('.blue').data('target1');
var download = $('.blue').data('target2');
var price = $(this).data('price');

$(document).ready(function() {
  $('.blue').on('click', function() {
      $(upload).removeClass('hide');
      $(download).removeClass('hide');
  });
  $('#price').text(price);
});

＆＃13;

div {
  margin:0;
  padding:0;
}
.blue {
  background-color: #ddddEE;
  border: 1px solid black;
}
.blue:hover {
  cursor: pointer;
  background-color: #aaaaEE;
}
.red {
  background-color: #EEdddd;
  border: 1px solid black;
}
.bold {
  font-weight: 600;
  text-align: center;
}
.hide {
  display:none;
}
#price {
  font-size: 22px;
  color: blue;
  font-weight: 400;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-3">
  <div class="col-xs-12 blue" data-target1="#target1" data-target2="#target2">
  <span>$</span><span data-price="300" id="1">300</span><br>
  <p id="desc1" class="hide">Description 1</p>
    <span>text here</span><br>
    <span>text here</span><br>
    <span>text here</span>
  </div>
</div>
<div class="col-xs-3">
  <div class="col-xs-12 blue" data-target1="#target3" data-target2="#target4">
  <span>$</span><span data-price="600" id="2">600</span><br>
   <p id="desc2" class="hide">Description 2</p>
    <span>text here</span><br>
    <span>text here</span><br>
    <span>text here</span>
  </div>
</div><div class="col-xs-3">
  <div class="col-xs-12 blue" data-target1="#target5" data-target2="#target6">
  <span>$</span><span class="prices" data-price="1200" id="3">1200</span><br>
     <p id="desc3" class="hide">Description 3</p>
    <span>text here</span><br>
    <span>text here</span><br>
    <span>text here</span>
  </div>
</div>
<div class="col-xs-3">
  <div class="col-xs-12 red">
    <span class="bold">Summary</span><br>
    <div id="target1" class="hide"><span>TARGET 1</span></div>
    <div id="target2" class="hide"><span>TARGET 2</span></div>.
    <div id="target3" class="hide"><span>TARGET 3</span></div>
    <div id="target4" class="hide"><span>TARGET 4</span></div>
    <div id="target5" class="hide"><span>TARGET 5</span></div>
    <div id="target6" class="hide"><span>TARGET 6</span></div>
    <span id="price" class=""></span>
  </div>
</div>

＆＃13;

这是我的小提琴：https://jsfiddle.net/rodcunha/qav9sn6n/42/

提前感谢您对这位新手的任何帮助。

Answer 1

将代码替换为：

  $(document).ready(function() {
      $('.blue').on('click', function(e) {
        $($(e.currentTarget).data('target1')).removeClass('hide');
        $($(e.currentTarget).data('target2')).removeClass('hide');
        $('#price').text($(e.target).parent().find('.price').data('price'));
      });
  });

Answer 2

为每个price添加span data-price课程。

<span>$</span><span class="price" data-price="300" id="1">300</span><br>

HTML：

<div class="col-xs-3">
    <div class="col-xs-12 blue" data-target1="#target1" data-target2="#target2">
      <span>$</span><span class="price" data-price="300" id="1">300</span><br>
      <p id="desc1" class="hide">Description 1</p>
      <span>text here</span><br>
    </div>
</div>

<div class="col-xs-3">
    <div class="col-xs-12 blue" data-target1="#target3" data-target2="#target4">
       <span>$</span><span class="price" data-price="600" id="2">600</span><br>
       <p id="desc2" class="hide">Description 2</p>
       <span>text here</span><br>
    </div>
</div>

<div class="col-xs-3">
    <div class="col-xs-12 blue" data-target1="#target5" data-target2="#target6">
      <span>$</span><span class="prices price" data-price="1200" id="3">1200</span><br>
      <p id="desc3" class="hide">Description 3</p>
      <span>text here</span><br>
    </div>
</div>

<div class="col-xs-3">
  <div class="col-xs-12 red">
    <span class="bold">Summary</span><br> 

    <!-- add 'summary' class for all div -->
    <div id="target1" class="hide summary"><span>TARGET 1</span></div>
    <div id="target2" class="hide summary"><span>TARGET 2</span></div>
    <div id="target3" class="hide summary"><span>TARGET 3</span></div>
    <div id="target4" class="hide summary"><span>TARGET 4</span></div>
    <div id="target5" class="hide summary"><span>TARGET 5</span></div>
    <div id="target6" class="hide summary"><span>TARGET 6</span></div>
    <span id="price" class=""></span>
  </div>
</div>

要获取当前点击的div，请使用currentTarget而不是target因为currentTarget始终返回.blue包含div，因为事件列表器设置在'.blue'上但是{{ 1}}结果可能会有所不同，具体取决于您在target类div中的点击位置。

jQuery的：

.blue

jsfiddle链接： https://jsfiddle.net/sajibcse68/qav9sn6n/49/

Answer 3

我不确定这是你想要的行为，你可以查一下吗？

https://jsfiddle.net/rodcunha/qav9sn6n/42/

$(document).ready(function() {  

      $('.blue').click(function() {          
          var x = $(this).attr('data-target1');      
          $(x).removeClass('hide');
      });
      $('#price').text(price);
 });

如果您想要添加或删除课程hide再次点击该div，您可以将removeClass更改为toggleClass。

Answer 4

要了解问题的原因以及如何解决问题，在目前的情况下，您必须要小心评估您编写的各种指令，以及您使用的某些jQuery指令工作

首先要注意的是：Javascript代码的前三行在读完之后才会被评估。因此，在评估它们之后，变量的状态如下：

upload = '#target1'
download = '#target2'
price = undefined

由于这些是在其余代码中使用的值，在所有情况下，您可以看到为什么它始终只显示您对第一个<div>的期望。为了理解原因，让我们分析第一行：

var upload =
    $('.blue')       [1]
    .data('target1') [2]

[1]返回包含具有<div>类的DOM blue元素的jQuery集合。到目前为止，这么好吗？
[2]返回与jQuery集合的 first 元素的data-target1属性相关联的值（请参阅documentation for the .data method）

您可能想要的是upload，download和price包含与用户点击的data-*对应的<div>属性的值。您无法预先知道用户将单击哪个元素，因此在用户单击任何内容之前读取值是没有意义的。因此，您应该在处理事件时阅读值。

根据jQuery's documentation for the event handlers，this是事件当前与之关联的元素。那么你的<div>元素。

现在您知道了，您可能已经意识到应该采取哪些措施来纠正您的代码。通过移动现有代码并尽可能进行最小的更改，您最终得到以下工作代码。

$(document).ready(function() {
    $('.blue').on('click', function() {
        var upload = $(this).data('target1');
        $(upload).removeClass('hide');
        var download = $(this).data('target2');
        $(download).removeClass('hide');

        var price = $(this).find('[data-price]').data('price');
        $('#price').text(price);
    });
});

jQuery：根据来自其他DIV元素的点击更新摘要DIV上的内容

4 个答案: