最初の要素が選択されている場合、他の要素が選択されます

Question

特定の属性を持つ要素を選択したいが、それらの最初の要素が選択されていない限りは何も選択されません。

$(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（）が上で動作しなかったのかわかりません。

Answer 1

代わりにクラスを使用すると、CSSプロパティを直接変更できます。

// Wrong 

// .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)"); 
    } 
}); 

// Better. 

/** 
* CSS: 
* .card { border: 1px solid rgba(0, 0, 0, 0.125); } 
* .card.active { border: 2px solid black; } 
*/ 
$('.card').on('click', function() { 
    // Remove class for all. 
    $('.card').each(function() { 
    $(this).removeClass('active'); 
    }); 
    // Add class for current element. 
    $(this).addClass('active'); 
}); 

$('.card').on('click', function (e) { 
    var isActive = $(this).attr('class').indexOf('active') > -1; 
    // Remove class for all. 
    $('.card').forEach(function() { 
    $(this).removeClass('active'); 
    }); 
    // Add class for current element. 
    if (!isActive) { 
    $(this).addClass('active'); 
    } 
});