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');
  }
});

如果第一个选择了jquery，则选择其他元素

1 个答案: