无法选择当前选择的div

我正在创建一个带有相应文本的“幻灯片放映”。

我可以选择新的照片和文字，但是在选择选择照片/文字的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名称

来源

2013-12-17 Mayo

你正在复制我很肯定不会帮助的事情。 ID应该是唯一的。当您想要具有相同标识符的多个元素时使用类。 –

你在问什么不太清楚。 JS小提琴向我展示了3个方格，并且点击每个方格改变了右边的大输出方块。究竟是什么问题？ – NibblyPig

他希望所选的小灰色方块一旦点击就变成白色。 – BeNdErR

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

我添加以下两行：

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

http://jsfiddle.net/5gqAH/

第一行去除从所有div元素的背景颜色，以及第二线再次将其添加到当前元素。

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

来源

2013-12-17 17:01:36 NibblyPig

我发誓我试过了！我会再试一次。 :-) – Mayo

你可以使用我的JS小提琴作为参考，我没有触及任何其他代码。 – NibblyPig

谢谢你这样做 - 不知道我是怎么搞砸了。几分钟后我会在jsfiddle中发布完成版 – Mayo

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

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

添加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; 
}

来源

2013-12-17 17:02:27 Shai

谢谢。我将把我的最终代码放在jsfiddle中供将来参考。谢谢。 – Mayo

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

来源

2013-12-17 17:03:16 SW4

谢谢。我会仔细研究所有这些以找到我错过的地方。 – Mayo

说实话，我真的无法理解的问题。

如果你想检查单击的红色小框，那么你可以使用$(this)作为

$(this).siblings().each(function(){ $(this).css('background-color','red') }); 
$(this).css('background-color','white');

$（本）.siblings（）位把所有的背景为红色或任何颜色，你想。让我知道如果这不是你想要的。

来源

2013-12-17 17:14:25 Alok

无法选择当前选择的div

回答

相关问题