Question

此处示例：http://codepen.io/agentmi6/pen/JoZZWm

当我点击[+]图标时，如何在灰色div中显示绿色div的文字？我尝试了很多不同的场景，但都没有用，有人可以给我一些指示，我怎么能这样做，我真的很感激。

    <div id="wrapper">
      <div class="container">
        <div class="first" id="f">
          <div class="set">+</div>
          this is the 1st element
        </div>
        <div class="first" id="s">
          <div class="set">+</div>
          this is the 2nd element
        </div>
        <div class="first" id="t">
          <div class="set">+</div>
          this is the 3rd element
        </div>
      </div>

      <div id="cc"></div>
    </div>

CSS

.first{
  margin-top:5px;
  border:1px solid black;
  width:190px;
  height:40px;
  background-color:green;
}

#cc{
  margin-top:5px;
  width:190px;
  height:40px;
   border:1px solid black;
  background-color:grey;
}

.set{
  cursor:pointer;
  color:#fff;
  font-size:33px;
  float:right;
  border:1px solid white;
}

Answer 1

您可以使用：

$(document).ready(function(){

  $('.set').click(function(){
    var text = $(this).parents("div.first").text();
    $("#cc").text(text);
  })

});

Answer 2

本准则可以帮助您

var tempText="";

$('.container .set').each(function(){
tempText=tempText+ $(this).html();

});

$('#cc').html(tempText);

Answer 3

这里试试这个（小提琴：http://jsfiddle.net/nek9fona/）

JQ：

$(function(){
    $('.set').click(function(){
        var $this = $(this);
        var text = $this.parent('.first').text();

        $('#cc').text(text);

    });
});

Answer 4

我猜你不希望复制的文字包含＆＃34; +＆＃34;符号？在这种情况下，您可以这样做：

$('.set').click(function() {
    var text = $(this.nextSibling).text().trim();
    $('#cc').text(text);
});

演示： http://codepen.io/anon/pen/MYXXrr

请注意，通过将文本包装到某个容器中来改进HTML结构是有意义的：

<div class="first" id="s">
  <div class="set">+</div>
  <div class="text">this is the 2nd element</div>
</div>

在这种情况下，代码将变得更加可靠和清晰：

$('.set').click(function() {
    var text = $(this).next('.text').text(); // or $(this).parent().find('.text')
    $('#cc').text(text);
});

演示： http://codepen.io/anon/pen/ogyyoO

Answer 5

你必须得到 .first div的文字，我建议你把文字放到标签中，这样就很容易得到它，所以你没有得到 .get按钮的 + 。这是新的JavaScript

$(document).ready(function(){

  $('.set').click(function(){

    // Get the text inside the span in the parent .first of the clicked .set button
    var text = $(this).parent('.first').find('span').text();
    $('#cc').text(text);
 });

});

HTML看起来像这样

<div class="container">
  <div class="first" id="f">
    <div class="set">+</div>
    <span>this is the 1st element</span>
  </div>
  <div class="first" id="s">
    <div class="set">+</div>
    <span>this is the 2nd element</span>
  </div>
  <div class="first" id="t">
    <div class="set">+</div>
    <span>this is the 3rd element</span>
  </div>
</div>
<div id="cc"></div>

这是更新后的CodePen

Answer 6

将它放在你的头部html部分。或身体部分的底部。

<script>
$(document).ready(function() {
  $('.set').on('click', function(){
   var text_val = $(this).closest('div.first').text();
   $('#cc').text(text_val);
  });
});
</script>

如何从具有相同类的div获取文本值，并在另一个div中显示？

6 个答案: