Question

我正在尝试使用jquery在其他div中添加单击元素数据文本。

其操作逻辑应如下：

当你单击word1时，如果你想添加word2，那么点击word1后应该在#words div中加入word1，然后点击word2它应该也会出现在#words div中。

我的问题是我无法添加第二个单词。

以下是来自jsfiddle的 DEMO 。

＆＃13;

$("body").on("click", ".word", function() {
   var dataWord = $(this).attr("data-word");
   var dataBox = $("#words");
   var oldWords = $(dataBox).html("<div class='ab'>"+dataWord+"</div>"); 
   $(dataBox).html(oldWords.html() + oldWords.html());
   return false;
});

＆＃13;

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #FAFAFA;
    font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -ms-text-size-adjust: 100%;
    -webkit-texts-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
}
.container {
  position:relative;
  width:100%;
  max-width:400px;
  margin:0px auto;
  padding:50px 0px;
  overflow:hidden;
}
.word {
  position:relative;
  background-color:red;
  border-radius:2px;
  margin-left:5px;
  color:#ffffff;
  float:left;
  font-weight:400;
  font-size:13px;
  padding:5px;
  cursor:pointer;
}
.word:hover {
  background-color:black;
  color:#ffffff;
}

.addedWords {
  position:relative;
  float:left;
  width:100%;
  padding:10px;
  background-color:#d8dbdf;
  margin-top:40px;
}

.ab {
  background-color:blue;
  color:#ffffff;
  margin-left:5px;
  float:left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="word" data-word="word1">
    Word1
  </div>
  <div class="word" data-word="word2">
    Word 2
  </div>
  <div class="addedWords" id="words">

  </div>
</div>

＆＃13;

Answer 1

只需更新您的javascript onclick方法：

$("body").on("click", ".word", function() {
   var dataWord = $(this).attr("data-word");
   var dataBox = $("#words");
   var oldWords = dataBox.append("<div class='ab'>"+dataWord+"</div>"); 
   return false;
});

检查jsfiddle here

Answer 2

您只需使用.append()

即可

$("#words").append("<div class='ab'>" + dataWord + "</div>");

$("body").on("click", ".word", function() {
  var dataWord = $(this).attr("data-word");
  var dataBox = $("#words");
  dataBox.append("<div class='ab'>" + dataWord + "</div>");
  return false;
});

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  background-color: #FAFAFA;
  font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -ms-text-size-adjust: 100%;
  -webkit-texts-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
}

.container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0px auto;
  padding: 50px 0px;
  overflow: hidden;
}

.word {
  position: relative;
  background-color: red;
  border-radius: 2px;
  margin-left: 5px;
  color: #ffffff;
  float: left;
  font-weight: 400;
  font-size: 13px;
  padding: 5px;
  cursor: pointer;
}

.word:hover {
  background-color: black;
  color: #ffffff;
}

.addedWords {
  position: relative;
  float: left;
  width: 100%;
  padding: 10px;
  background-color: #d8dbdf;
  margin-top: 40px;
}

.ab {
  background-color: blue;
  color: #ffffff;
  margin-left: 5px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="word" data-word="word1">
    Word1
  </div>
  <div class="word" data-word="word2">
    Word 2
  </div>
  <div class="addedWords" id="words">

  </div>
</div>

Answer 3

您只需对代码进行一些更改：

而不是使用html()使用append()

var oldWords = $(dataBox).html("<div class='ab'>"+dataWord+"</div>");

如下图所示：

var oldWords = $(dataBox).append("<div class='ab'>"+dataWord+"</div>");

html（）完全替换元素的内容，而append（）在任何现有内容的末尾添加新内容

注释代码说： $(dataBox).html(oldWords.html() + oldWords.html());

.append（）会将给定的HTML粘贴到您正在调用.append（）的元素中已存在的HTML的末尾，而 .html（） 将使用您传入的新HTML覆盖元素中当前存在的内部HTML。

如果元素为空，或者如果要替换元素的内部HTML，则 .html（）非常方便。如果你想为一个元素添加一个新的html字符串（例如，你想动态添加一个新的列表项），那么 .append（）就很棒了。

Answer 4

您需要使用

$(".word").on("click", function() {
           var dataWord = $(this).attr("data-word");
           var dataBox = $("#words");
           var oldWords = $(dataBox).append("<div class='ab'>"+dataWord+"</div>"); 
        });

Answer 5

使用.append代替.html，您将一次又一次地复制word。以下是工作示例。

＆＃13;

$("body").on("click", ".word", function() {
   var dataWord = $(this).attr("data-word");
   var dataBox = $("#words");
   var newWords = "<div class='ab'>"+dataWord+"</div>"; 
   $(dataBox).append(newWords);
   return false;
});

＆＃13;

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #FAFAFA;
    font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -ms-text-size-adjust: 100%;
    -webkit-texts-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
}
.container {
  position:relative;
  width:100%;
  max-width:400px;
  margin:0px auto;
  padding:50px 0px;
  overflow:hidden;
}
.word {
  position:relative;
  background-color:red;
  border-radius:2px;
  margin-left:5px;
  color:#ffffff;
  float:left;
  font-weight:400;
  font-size:13px;
  padding:5px;
  cursor:pointer;
}
.word:hover {
  background-color:black;
  color:#ffffff;
}

.addedWords {
  position:relative;
  float:left;
  width:100%;
  padding:10px;
  background-color:#d8dbdf;
  margin-top:40px;
}

.ab {
  background-color:blue;
  color:#ffffff;
  margin-left:5px;
  float:left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="word" data-word="word1">
    Word1
  </div>
  <div class="word" data-word="word2">
    Word 2
  </div>
  <div class="addedWords" id="words">

  </div>
</div>

＆＃13;

Answer 6

希望这个帮助

$("body").on("click", ".word", function() {
   var dataWord = $(this).attr("data-word");
   var dataBox = $("#words");
   if(dataWord != $(dataBox).data('current')){
    $(dataBox).data('current', dataWord);      
    $(dataBox).html('');
   }   
   $(dataBox).html($(dataBox).html() + dataWord+ " ");
   return false;
});

js fiddle edited

多次添加相同的div元素jquery

6 个答案: