猿问

如何连接一个变量中的值

单击一个变量时如何连接 div 的值？


这是我的代码示例。


var concatenated_values; //1,2,3


$("#first_container").click(function() {

  console.log($("#first_container input:hidden").val());


});


$("#second_container").click(function() {

  console.log($("#second_container input:hidden").val());


});


$("#third_container").click(function() {

  console.log($("#third_container input:hidden").val());


});

#first_container, #second_container , #third_container{

  width:300px;

  height:200px;

  background:red;

  cursor:pointer;

}

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">


  <div id="first_container">


      <p>Test 1</p>

      <input type="hidden" value='1'/>


  </div>


  <div id="second_container">


      <p>Test 2</p>

      <input type="hidden" value='2'/>


  </div>



  <div id="third_container">


      <p>Test 3</p>

      <input type="hidden" value='3'/>


  </div>


</div>


</body>

</html>

concatenated_values所以当我点击我所有的div时，我试图在我这样的地方获得一个价值

1,2,3

我仍然可以单击另一个 div，就像取消选择一样，所以当我单击选定的 div 时，它应该更新我的变量并删除它的值。

1,3

任何帮助将非常感激。


繁花不似锦
浏览 154回答 4
4回答

烙印99

将您的变量作为数组并将 div 的值保存在该数组中。之后，您可以遍历该数组并在需要时打印所有值，或者使用其他数组函数（如 reduce）来计算总和。var concatenated_values = []; //1,2,3$("#first_container").click(function() {&nbsp; const input = $("#first_container input:hidden").val();&nbsp; if (concatenated_values.includes(input))&nbsp; &nbsp; concatenated_values.splice(concatenated_values.indexOf(input), 1);&nbsp; else&nbsp; &nbsp; concatenated_values.push($("#first_container input:hidden").val());&nbsp; console.log(concatenated_values);});$("#second_container").click(function() {&nbsp; const input = $("#second_container input:hidden").val();&nbsp; if (concatenated_values.includes(input))&nbsp; &nbsp; concatenated_values.splice(concatenated_values.indexOf(input), 1);&nbsp; else&nbsp; &nbsp; concatenated_values.push($("#second_container input:hidden").val());&nbsp; console.log(concatenated_values);});$("#third_container").click(function() {&nbsp; const input = $("#third_container input:hidden").val();&nbsp; if (concatenated_values.includes(input))&nbsp; &nbsp; concatenated_values.splice(concatenated_values.indexOf(input), 1);&nbsp; else&nbsp; &nbsp; concatenated_values.push($("#third_container input:hidden").val());&nbsp; console.log(concatenated_values);});#first_container,#second_container,#third_container {&nbsp; width: 300px;&nbsp; height: 200px;&nbsp; background: red;&nbsp; cursor: pointer;}<html><head>&nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>&nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body>&nbsp; <div class="container">&nbsp; &nbsp; <div id="first_container">&nbsp; &nbsp; &nbsp; <p>Test 1</p>&nbsp; &nbsp; &nbsp; <input type="hidden" value='1' />&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="second_container">&nbsp; &nbsp; &nbsp; <p>Test 2</p>&nbsp; &nbsp; &nbsp; <input type="hidden" value='2' />&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="third_container">&nbsp; &nbsp; &nbsp; <p>Test 3</p>&nbsp; &nbsp; &nbsp; <input type="hidden" value='3' />&nbsp; &nbsp; </div>&nbsp; </div></body></html>
0

潇湘沐

您真的不需要为每个 div 添加单独的点击事件。然后给一些边框或改变背景颜色来了解点击与否的区别。因此，如果单击它，我会添加一些类。所以最后的代码是<head>&nbsp; &nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>&nbsp; &nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; var concatenated_values = [];&nbsp; &nbsp; &nbsp; &nbsp; $().ready(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#first_container, #second_container, #third_container").click(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var val = $(this).find('input:hidden').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var indx = concatenated_values.indexOf(val);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (indx > -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; concatenated_values.splice(indx, 1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).removeClass('selected');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; concatenated_values.push(val);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass('selected');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(concatenated_values);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; </script>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; #first_container,&nbsp; &nbsp; &nbsp; &nbsp; #second_container,&nbsp; &nbsp; &nbsp; &nbsp; #third_container {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .selected {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid rgb(48, 47, 46);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head>
0

倚天杖

我建议你改变你的逻辑，根本不使用全局变量。如果您修改 HTML 以便在每个 clickable 上放置一个公共类div，那么您可以使用一个类来跟踪哪个是“活动的”，以便制作一个子值数组input。然后你可以join()这样做来制作你需要的字符串。这种方法更易于维护、可扩展且更简单。这是一个例子：$('.sub-container').on('click', e => {&nbsp; let $this = $(e.target).toggleClass('active');&nbsp; let concatenated_values = $('.active').map((i, el) => $(el).find('input').val()).get().join(',');&nbsp; console.log(concatenated_values);});.sub-container {&nbsp; width: 300px;&nbsp; height: 200px;&nbsp; background: red;&nbsp; cursor: pointer;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script><div class="container">&nbsp; <div id="first_container" class="sub-container">&nbsp; &nbsp; <p>Test 1</p>&nbsp; &nbsp; <input type="hidden" value="1" />&nbsp; </div>&nbsp; <div id="second_container" class="sub-container">&nbsp; &nbsp; <p>Test 2</p>&nbsp; &nbsp; <input type="hidden" value="2" />&nbsp; </div>&nbsp; <div id="third_container" class="sub-container">&nbsp; &nbsp; <p>Test 3</p>&nbsp; &nbsp; <input type="hidden" value="3" />&nbsp; </div></div>
0

心有法竹

使用类会简化事情，下面我使用一个名为 selected 的类，然后您可以使用 toggleClass 方法打开或关闭。然后您可以找到所有具有所选类的 Div，然后将值相加。例如。$('.container > div').click(function () {&nbsp; var $t = $(this);&nbsp; $t.toggleClass('selected');&nbsp; var concatenated = [];&nbsp; $t.closest('.container')&nbsp; &nbsp; .find('.selected').each(function () {&nbsp; &nbsp; &nbsp; concatenated.push($(this).find('input').val());&nbsp; &nbsp; });&nbsp; $('#result').text(concatenated.join(','));});.container > div {&nbsp; width:300px;&nbsp; height:30px;&nbsp; background:red;&nbsp; cursor:pointer;}.container > .selected {&nbsp; background: pink;}#result {&nbsp; width:300px;&nbsp; height:30px;&nbsp; background: yellow;&nbsp;&nbsp;}<html><head>&nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>&nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body><div class="container">&nbsp; <div id="first_container">&nbsp; &nbsp; &nbsp; <p>Test 1</p>&nbsp; &nbsp; &nbsp; <input type="hidden" value='1'/>&nbsp; </div>&nbsp; <div id="second_container">&nbsp; &nbsp; &nbsp; <p>Test 2</p>&nbsp; &nbsp; &nbsp; <input type="hidden" value='2'/>&nbsp; </div>&nbsp; <div id="third_container">&nbsp; &nbsp; &nbsp; <p>Test 3</p>&nbsp; &nbsp; &nbsp; <input type="hidden" value='3'/>&nbsp; </div></div><p>Result</p><div id="result"></div></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答