0
我想选择具有特定属性的元素,但除非选择了第一个元素,否则不会选择任何元素。如果选择第一个元素,则选择其他元素jquery
$(document).ready(function() {
$("#add").click(function() {
$(".cards").append('<div class="card new" style="width: 20rem;">\
<div class="layer"></div>\
<div class="card-block">\
<h4 class="card-title"></h4>\
<p class="card-text"></p>\
</div>\
<div class="card-block">\
<div class="delete">Del</div>\
<div class="edit" data-toggle="modal" data-target="#note">edit</div>\
</div>\
</div>');
var title = $("#noteTitle").val();
var text = $("#noteBody").val();
var layer = $("#selected").css("background-color");
$(".new .layer").css({"background-color": layer, "position": "absolute", "opacity": ".2", "top":"0", "left":"0", "width": "100%", "height": "100%"});
$(".new h4").html(title);
$(".new p").html(text);
$(".card").removeClass("new");
});
// .toggleClass() didn't work here
$("main").on("click", ".card", function() {
if($(this).css("border") == "1px solid rgba(0, 0, 0, 0.125)") {
$(this).css("border", "solid 2px black");
} else {
$(this).css("border", "1px solid rgba(0, 0, 0, 0.125)");
}
});
//is there a problem below ?
$(".colors").click(function() {
if($(".card").length != 0 && $(".card").css("border").indexOf("2px") != -1)
$('.card[style*="2px"]').find(".layer").css("background-color", $(this).val());
});
我不知道为什么toggleClass()没有在上面工作。
这基本上是怎么不做的事情。不要使用CSS,尤其是颜色作为条件来做任何事情,而是添加类。不要在JavaScript中写入大块HTML。 – adeneo
我已经改变了我的代码,只是添加了类并作为条件使用,它工作!,我不知道为什么我忘记了很多时间使用类,感谢您的建议。 –