<div id="calcwrapper">
<img class="sugarcube" src="images/sugarcube.png" width="13" height="17">
<div id="drinks">
<a id="drink1" href=""><img src="images/drinkicon1.png" width="84" height="81"></a><div class="drink1"></div>
</div>
</div>
Trong ví dụ trên chỉ có nút đồ uống duy nhất, nhưng mã của tôi chứa tám nút. Mỗi cái có một div được phân loại tương ứng. Những gì tôi đang cố gắng làm là "động" lấy id của thẻ neo (id = "drink1") để thêm một hình ảnh đường mía nhân bản (img class = "sugarcube" ...) vào tên lớp tương đương div (class = "drink1"). Tôi hy vọng điều đó không gây nhầm lẫn. Có lẽ những nỗ lực không thành công dưới đây sẽ cung cấp cho bạn một số ý tưởng về những gì tôi đang cố gắng đạt được.Sử dụng jQuery để tìm một lớp theo tên ID
Cố gắng 1
$(".sugarcube").clone().attr("class", "sugarcube" + i).appendTo($(this).parent((".drink1").attr("class")));
Cố gắng 2 (cố gắng tìm một giải pháp làm việc thông qua giao diện điều khiển)
var className = $(this).attr("id");
console.log(className);
console.log($(this).parent().children("div").hasClass(className));
Tôi đã tìm kiếm Google và StackOverflow và đã không tìm thấy bất kỳ mẫu mã. Cảm ơn sự giúp đỡ của bạn.
Dưới đây là hoàn toàn bối cảnh HTML code ...
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<script src="js/jquery-animate-css-rotate-scale.js"></script>
<script>
$(function() {
$(".sugarcube").hide();
var max = 8;
function animateSugarcubes() {
for (var i=1; i<=max; i++) {
$(".sugarcube" + i).css("position", "absolute");
$(".sugarcube" + i).css("top", Math.ceil(Math.random() * (50 - 20) + 20));
$(".sugarcube" + i).css("left", Math.ceil(Math.random() * (85 - 40) + 40));
$(".sugarcube" + i).hide();
}
}
$("#drinks a").click(function() {
for (var i=1; i<=max; i++) {
// Attempt 1
$(".sugarcube").clone().attr("class", "sugarcube" + i).appendTo($(this).parent().children($(this).attr("id")));
// Attempt 2 test code.
var className = $(this).attr("id");
console.log($(this).parent().children("div").hasClass(className));
}
return false;
});
animateSugarcubes();
});
</script>
</head>
<body>
<div id="calcwrapper">
<img class="sugarcube" src="images/sugarcube.png" width="13" height="17">
<div id="drinks">
<a id="drink1" href=""><img src="images/drinkicon1.png" width="84" height="81"></a><div class="drink1"></div>
<a id="drink2" href=""><img src="images/drinkicon2.png" width="84" height="81"></a><div class="drink2"></div>
<a id="drink3" href=""><img src="images/drinkicon3.png" width="84" height="81"></a><div class="drink3"></div>
<a id="drink4" href=""><img src="images/drinkicon4.png" width="80" height="81"></a><div class="drink4"></div>
<a id="drink5" href=""><img src="images/drinkicon5.png" width="84" height="81"></a><div class="drink5"></div>
<a id="drink6" href=""><img src="images/drinkicon6.png" width="84" height="81"></a><div class="drink6"></div>
<a id="drink7" href=""><img src="images/drinkicon7.png" width="84" height="81"></a><div class="drink7"></div>
<a id="drink8" href=""><img src="images/drinkicon8.png" width="84" height="81"></a><div class="drink8"></div>
</div>
</div>
</body>
</html>
Xin lưu ý rằng thẻ neo sử dụng một id (id = "drink1") trong khi div sử dụng một lớp (class = "drink1")
Trong bối cảnh những gì được gọi như vậy? 'Điều này' trong đoạn mã trên là gì? –