Невозможно выбрать текущий выбранный div

0

Я рядом, но без сигары.

Я создаю "слайд-шоу" с сопроводительным текстом.

Я могу выбрать новые фотографии и текст, но я пропустил что-то простое, когда дело доходит до выбора 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/

(Я не загружал фотографии, но это не имело значения - я изменил размер, чтобы дать визуальную подсказку.)

EDIT: Обновлен мой jsfiddle для удаления дубликатов имен div

  • 0
    Вы дублируете удостоверения личности, которые, я уверен, не помогут. Идентификаторы должны быть уникальными. Используйте классы, когда вам нужно несколько элементов с одинаковым идентификатором.
  • 2
    Не совсем понятно, о чем ты спрашиваешь. Скрипка JS показывает мне 3 квадрата, и нажатие на каждый квадрат меняет большой квадрат вывода справа. в чем именно проблема?:
Показать ещё 1 комментарий
Теги:

4 ответа

2
Лучший ответ

Вы можете использовать $(this) чтобы получить элемент, который был нажат в текущий момент.

Я добавил эти две строки:

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

http://jsfiddle.net/5gqAH/

Первая строка удаляет цвет фона из всех элементов div, а вторая строка добавляет его снова к текущему элементу.

Я думаю, что ваш код может использовать немного приукрашивание, хотя это выше всего лишь пример, и классы могут работать лучше. У вас есть дубликаты идентификаторов.

Поделиться
  • 0
    Клянусь, я попробовал это !!! Я попробую это снова. :-)
  • 0
    Вы можете использовать мою скрипку JS для справки, я не касался другого кода.
Показать ещё 1 комментарий
2

Обновленный скрипт

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;
}
Поделиться
  • 0
    Спасибо. Я пойду через все это, чтобы найти, где я пропустил это.
1

Честно говоря, я не мог понять проблему.

Если вы хотите проверить, какая маленькая красная коробка была нажата, вы можете использовать $(this) как в

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

$ (this).siblings() помещает все фоны в красный или любой цвет, который вы хотите. Дайте мне знать, если вы этого не хотели.

Поделиться
1

Внутри обработчика кликов $(this) будет ссылаться на только что нажатую кнопку (div).

Обновлен JSFiddle здесь (добавлены строки 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;
}
Поделиться
  • 0
    Спасибо. Я оставлю свой окончательный код в jsfiddle для дальнейшего использования. Спасибо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню