Выбор опций из разных divs

Вот моя рабочая скрипка: http://jsfiddle.net/exlondoner/YvPg9/ То, что я пытаюсь достичь, состоит в том, чтобы выбрать (набросок) один вариант из Media Type и один элемент из Sort By, как бы я это сделал?Выбор опций из разных divs

JS:

$('.media-select-option').on('click', function() { 
$(this).addClass('selected'); 
$('.overlay-close-btn').addClass('checked');  
});

HTML:

<div class="overlaymedia"> 
<div class='media-filter'> 
    <div class="media-nav" role='contentinfo'> 
     <div class="media-nav media-menu-container"> 

      <h5 class="media-menu-heading close-overlay-btn">Media Type</h5> 
      <!-- Media Type: All/Photos/Videos --> 
      <div class="media-select-option media-all" data-href="">All</div> 
      <div class="media-select-option media-photos" data-href="">Photos</div> 
      <div class="media-select-option media-videos" data-href="">Videos</div> 

      <h5 class="media-menu-heading close-overlay-btn">Sort By</h5> 
      <!-- Sort By: Latest/Popular --> 
      <div class="media-select-option media-latest" data-href="">Latest</div> 
      <div class="media-select-option media-popular" data-href="">Popular</div> 
      <div class="media-menu-bottom close-overlay-btn"> 
       <div class="overlay-close-btn bottom">Close</div> 
      </div> 

     </div> 
    </div> 
</div>

CSS:

.overlay-close-btn:before { content: '×'; } 

.overlay-close-btn.checked:before { 
content: '✔'; 
} 
.media-select-option { 
border: solid 1px #fff; 
} 
.selected { 
border: solid 1px #f00; 
}

источник

2013-06-19 user2386255

Поставив свой вариант в различных div-х так:

<div> 
    <div class="media-select-option media-all" data-href="">All</div> 
    <div class="media-select-option media-photos" data-href="">Photos</div> 
    <div class="media-select-option media-videos" data-href="">Videos</div> 
</div> 

<h5 class="media-menu-heading close-overlay-btn">Sort By</h5> 
<!-- Sort By: Latest/Popular --> 
<div> 
    <div class="media-select-option media-latest" data-href="">Latest</div> 
    <div class="media-select-option media-popular" data-href="">Popular</div> 
</div>

Вы тогда сможете добиться того, что вы хотите, выполнив:

$(this).siblings().removeClass('selected');

Fiddle: http://jsfiddle.net/YvPg9/3/

источник

2013-06-19 15:43:42

Является ли это то, что вы пытаетесь достичь? - http://jsfiddle.net/skip405/YvPg9/2/

И я бы также рекомендовал использовать более смысловую разметку. Если вам нужно выбрать один вариант, а не другие, просто используйте input[type="radio"] с помощью пробки label.

На мой взгляд - ваша надбавка должна выглядеть примерно так: http://jsfiddle.net/skip405/YvPg9/5/

источник

2013-06-19 15:44:03 skip405

Выбор опций из разных divs

ответ

Смежные вопросы