Question

我很近但没有雪茄。

我正在制作一个附有文字的“幻灯片放映”。

我可以选择新的照片和文字，但在选择选择照片/文字的navDiv时却遗漏了一些简单的内容。

我创造了一个jsfiddle，但实质上是：

$('.sectionGraphics').hide(); // Hide the existing photos

$('.sectionNav div').click(function(){

    $('.sectionGraphics:visible').hide(); // Hide current visible section
    var selected = $(this).data('target'); // Show selected section
    $('#slideShow > #'+selected).show();
    $('#test').html(selected).attr('class','').addClass(selected); // Show accompanying text

    //BUT NOW I WANT TO MAKE SELECTED NAV BOX WHITE AND CAN'T SEEM TO SELECT IT

    if (selected=="aaa"){ 
        $('#aaa').attr('class','').css("background-color","white");
    }
    // $('.sectionNav div > .'+selected).css('background-color','white');

}).first().click();

jsfiddle在这里：http://jsfiddle.net/MAYO/S63wy/6/

（我没有上传照片 - 但这无关紧要 - 我改变了尺寸以提供视觉线索。）

编辑：更新了我的jsfiddle以删除重复的div名称

Answer 1

您可以使用$(this)获取当前点击的元素。

我添加了这两行：

  $('.sectionNav div').css('background-color', '');
  $(this).css('background-color', 'white');

http://jsfiddle.net/5gqAH/

第一行从所有div元素中删除背景颜色，第二行将其再次添加到当前元素。

我认为你的代码可能会使用一些整理，上面只是一个例子，类可能会更好。你有一些重复的ID。

Answer 2

Updated Fiddle

的jQuery

$(function(){

  $('.sectionGraphics').hide();

  $('.sectionNav div').click(function(){
    var nav=$(this);
    $('.sectionGraphics:visible').hide(); // Hide current visible section
    var selected = $(this).data('target'); // Show selected section
     $('#slideShow > #'+selected).show();
     $('#test').html(selected).attr('class','').addClass(selected); // Show accompanying text
     //WANT TO MAKE SELECTED NAV BOX WHITE
    $('.sectionNav div').removeClass('selected');
      nav.addClass('selected');

   // $('.section_header div > .'+selected).css('background-color','red');
  // $('#slideNav4').css('background-color','red');
   // $('.section_header div > #SN-'+selected).html("aaa");

  }).first().click();


});

CSS

.on {
    background-color: white
}
.aaa {
    background-color: gray
}
.bbb {
    background-color: red
}
.ccc {
    background-color: blue
}
.box {
    display:inline-block;
    width:15px;
    height:15px;
    border:solid 1px #000000;
    margin:2px;
    background-color:#CCCCCC;
}
.box:hover, .box.selected {
    background-color:#FFFFFF;
}

Answer 3

在您的点击处理程序中，$(this)将引用刚刚点击的按钮（div）。

Updated JSFiddle here（在JS中添加13-14行，在CSS中添加21-23行）

添加了JS：

$(".sectionNav div").removeClass("box-selected"); // remove the white from all buttons
$(this).addClass("box-selected");                 // make the clicked button white

并添加了CSS：

.box-selected {
    background-color: #FFFFFF;
}

Answer 4

说实话，我真的不明白这个问题。

如果您想查看点击了哪个小红框，则可以使用{/ 1}}

$(this)

$（this）.siblings（）位将所有背景设置为红色或任何您想要的颜色。如果那不是你想要的，请告诉我。

无法选择当前选定的div

4 个答案: