Javascript 无法选择当前选定的div

我很接近，但没有雪茄

我正在制作一个幻灯片，附带文字

我可以选择新的照片和文本，但在选择选择照片/文本的导航div时，我缺少了一些简单的东西

我创建了一个JSFIDLE，但本质上是：

$('.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();

JSFIDLE在这里：

我没有上传照片-但这不重要-我改变了尺寸以提供视觉线索

编辑：更新了my JSFIDLE以删除重复的div名称

您可以使用$this获取当前单击的元素

我添加了这两行：

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

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

我认为您的代码可能需要一些整理，但上面只是一个示例，类可能工作得更好。您有一些重复的ID。

您可以使用$this获取当前单击的元素

我添加了这两行：

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

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

---

我认为您的代码可能需要一些整理，但上面只是一个示例，类可能工作得更好。您有一些重复的ID。

在单击处理程序中，$这将引用刚刚单击的按钮div

在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;
}

---

在click处理程序中，$将引用刚刚单击的按钮div

在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;
}

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

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

---

老实说，我不能真正理解这个问题

如果要检查单击了哪个红色小框，则可以使用$this，如中所示

$this.bit将所有背景设置为红色或任何您想要的颜色。

---

如果这不是你想要的，请告诉我。

老实说，我真的不理解这个问题

如果要检查单击了哪个红色小框，则可以使用$this，如中所示

$this.bit将所有背景设置为红色或任何您想要的颜色。

---

如果这不是您想要的，请告诉我。

您正在复制ID，我很确定这不会有什么帮助。ID应该是唯一的。当您需要具有相同标识符的多个元素时，请使用类。您所要求的不是很清楚。JS小提琴给我显示了3个方块，点击每个方块会改变右边的大输出方块。到底是什么问题？他希望选中的小灰色方块在单击后变为白色。你在复制ID，我很确定这不会有帮助。ID应该是唯一的。当您需要具有相同标识符的多个元素时，请使用类。您所要求的不是很清楚。JS小提琴给我显示了3个方块，点击每个方块会改变右边的大输出方块。到底是什么问题？他希望选中的小灰色方块在单击后变为白色。你可以使用我的JS小提琴作为参考，我没有碰过任何其他代码。谢谢你这么做了-不知道我是怎么搞砸的。我将在几分钟后在JSFIDLE中发布一个完成的版本。您可以使用我的JS FIDLE作为参考，我没有接触过任何其他代码。谢谢您这么做了-不知道我是怎么搞砸的。我将在几分钟后在JSFIDLE中发布一个完成的版本谢谢。我会检查所有这些，找出我错过的地方。谢谢。我会检查所有这些，找出我错过的地方。谢谢。我将在JSFIDLE中展示我的最终代码，以供将来参考。谢谢。我将在JSFIDLE中展示我的最终代码，以供将来参考。谢谢。