单击一个变量时如何连接 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任何帮助将非常感激。
4 回答
烙印99
TA贡献1829条经验 获得超13个赞
将您的变量作为数组并将 div 的值保存在该数组中。之后，您可以遍历该数组并在需要时打印所有值，或者使用其他数组函数（如 reduce）来计算总和。
var concatenated_values = []; //1,2,3
$("#first_container").click(function() {
const input = $("#first_container input:hidden").val();
if (concatenated_values.includes(input))
concatenated_values.splice(concatenated_values.indexOf(input), 1);
else
concatenated_values.push($("#first_container input:hidden").val());
console.log(concatenated_values);
});
$("#second_container").click(function() {
const input = $("#second_container input:hidden").val();
if (concatenated_values.includes(input))
concatenated_values.splice(concatenated_values.indexOf(input), 1);
else
concatenated_values.push($("#second_container input:hidden").val());
console.log(concatenated_values);
});
$("#third_container").click(function() {
const input = $("#third_container input:hidden").val();
if (concatenated_values.includes(input))
concatenated_values.splice(concatenated_values.indexOf(input), 1);
else
concatenated_values.push($("#third_container input:hidden").val());
console.log(concatenated_values);
});
#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>
潇湘沐
TA贡献1816条经验 获得超6个赞
您真的不需要为每个 div 添加单独的点击事件。
然后给一些边框或改变背景颜色来了解点击与否的区别。因此，如果单击它，我会添加一些类。
所以最后的代码是
<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>
<script>
var concatenated_values = [];
$().ready(function () {
$("#first_container, #second_container, #third_container").click(function () {
var val = $(this).find('input:hidden').val();
var indx = concatenated_values.indexOf(val);
if (indx > -1) {
concatenated_values.splice(indx, 1);
$(this).removeClass('selected');
} else {
concatenated_values.push(val);
$(this).addClass('selected');
}
console.log(concatenated_values);
});
});
</script>
<style>
#first_container,
#second_container,
#third_container {
width: 300px;
height: 200px;
background: red;
cursor: pointer;
margin:10px;
padding: 10px;
}
.selected {
border: 2px solid rgb(48, 47, 46);
}
</style>
</head>
倚天杖
TA贡献1828条经验 获得超3个赞
我建议你改变你的逻辑，根本不使用全局变量。如果您修改 HTML 以便在每个 clickable 上放置一个公共类div，那么您可以使用一个类来跟踪哪个是“活动的”，以便制作一个子值数组input。然后你可以join()这样做来制作你需要的字符串。
这种方法更易于维护、可扩展且更简单。这是一个例子：
$('.sub-container').on('click', e => {
let $this = $(e.target).toggleClass('active');
let concatenated_values = $('.active').map((i, el) => $(el).find('input').val()).get().join(',');
console.log(concatenated_values);
});
.sub-container {
width: 300px;
height: 200px;
background: red;
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">
<div id="first_container" class="sub-container">
<p>Test 1</p>
<input type="hidden" value="1" />
</div>
<div id="second_container" class="sub-container">
<p>Test 2</p>
<input type="hidden" value="2" />
</div>
<div id="third_container" class="sub-container">
<p>Test 3</p>
<input type="hidden" value="3" />
</div>
</div>
心有法竹
TA贡献1866条经验 获得超5个赞
使用类会简化事情，下面我使用一个名为 selected 的类，然后您可以使用 toggleClass 方法打开或关闭。
然后您可以找到所有具有所选类的 Div，然后将值相加。
例如。
$('.container > div').click(function () {
var $t = $(this);
$t.toggleClass('selected');
var concatenated = [];
$t.closest('.container')
.find('.selected').each(function () {
concatenated.push($(this).find('input').val());
});
$('#result').text(concatenated.join(','));
});
.container > div {
width:300px;
height:30px;
background:red;
cursor:pointer;
}
.container > .selected {
background: pink;
}
#result {
width:300px;
height:30px;
background: yellow;
}
<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>
<p>Result</p>
<div id="result"></div>
</body>
</html>
添加回答
举报
0/150
提交
取消