1

Есть необходимость при выборе option с определённым значением в select, задать класс active определённому div. На данный момент есть код; класс добавляется, но не убирается у остальных div.

$("#category").change(function(e) {
    e.preventDefault();
    $(".11, .22, .33, .44, .55, .66, .77, .88, .99, .100, .110, .120, .130")
        .not($(this.value).addClass('active'))
});
.markers_wrap a {
    display: block;
    text-decoration: none;
    color: #4d4d4d;
}
.active {
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<select name="catlist[]" id="category">
    <option>Выбрать блок</option>
    <option value=".11">блок 1</option>
    <option value=".22">блок 2</option>
    <option value=".33">блок 3</option>
    <option value=".44">блок 4</option>
    <option value=".55">блок 5</option>
    <option value=".66">блок 6</option>
    <option value=".77">блок 7</option>
    <option value=".88">блок 8</option>
    <option value=".99">блок 9</option>
    <option value=".100">блок 10</option>
    <option value=".110">блок 11</option>
    <option value=".120">блок 12</option>
    <option value=".130">блок 13</option>
</select>

<div class="11">блок 1</div>
<div class="22">блок 2</div>
<div class="33">блок 3</div>
<div class="44">блок 4</div>
<div class="55">блок 5</div>
<div class="66">блок 6</div>
<div class="77">блок 7</div>
<div class="88">блок 8</div>
<div class="99">блок 9</div>
<div class="100">блок 10</div>
<div class="1110">блок 11</div>
<div class="120">блок 12</div>
<div class="130">блок 13</div>

3 ответа 3

0

$("#category").change(function(e) {
  e.preventDefault();
  $('div').removeClass('active');
  $(this.value).addClass('active');
});
.markers_wrap a {
  display:block;
  text-decoration: none;
  color: #4d4d4d;
}
.active {
  color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<select name="catlist[]" id="category">
    <option>Выбрать блок</option>
    <option value=".11">блок 1</option>
    <option value=".22">блок 2</option>
    <option value=".33">блок 3</option>
    <option value=".44">блок 4</option>
    <option value=".55">блок 5</option>
    <option value=".66">блок 6</option>
    <option value=".77">блок 7</option>
    <option value=".88">блок 8</option>
    <option value=".99">блок 9</option>
    <option value=".100">блок 10</option>
    <option value=".110">блок 11</option>
    <option value=".120">блок 12</option>
    <option value=".130">блок 13</option>
</select>
<div class="11">блок 1</div>
<div class="22">блок 2</div>
<div class="33">блок 3</div>
<div class="44">блок 4</div>
<div class="55">блок 5</div>
<div class="66">блок 6</div>
<div class="77">блок 7</div>
<div class="88">блок 8</div>
<div class="99">блок 9</div>
<div class="100">блок 10</div>
<div class="110">блок 11</div>
<div class="120">блок 12</div>
<div class="130">блок 13</div>

12
  • $('div').each(function() {$(this).removeClass('active');}); - очень элегантно!
    – Vlad Vlad
    17 июн 2016 в 9:04
  • @VladVlad, спасибо, братиш
    – Doofy
    17 июн 2016 в 9:05
  • Спасибо за помощь ребятки ! Оказывается всё просто)
    – RazorXL
    17 июн 2016 в 9:06
  • @Doofy обращайся
    – Vlad Vlad
    17 июн 2016 в 9:06
  • @VladVlad, неприменно. Ну а чё не так? Если автору будет надо, запилит в общий блок дивы и перебирать их будет
    – Doofy
    17 июн 2016 в 9:08
0

Добавляем всем div-ам общий класс (допустим "test"), а перед добавлением класса указывающего на активность делаем так $('.test').removeClass('active');

0
0

Я бы завернул все дивы в общий родительский и сделал так (оставить нужно конечно же один из двух вариантов):

$("#category").change(function() {
// вариант №1 
     $(".categories div" + $(this).val()).addClass('active').siblings().removeClass('active');
// вариант №2
     $(".categories div.active").removeClass('active');
     $($(this).val()).addClass('active');
  });
.markers_wrap a {
  display:block;
  text-decoration: none;
  color: #4d4d4d;
}
.active {
  color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="categories">
    <select name="catlist[]" id="category">
        <option>Выбрать блок</option>
        <option value=".11">блок 1</option>
        <option value=".22">блок 2</option>
        <option value=".33">блок 3</option>
        <option value=".44">блок 4</option>
        <option value=".55">блок 5</option>
        <option value=".66">блок 6</option>
        <option value=".77">блок 7</option>
        <option value=".88">блок 8</option>
        <option value=".99">блок 9</option>
        <option value=".100">блок 10</option>
        <option value=".110">блок 11</option>
        <option value=".120">блок 12</option>
        <option value=".130">блок 13</option>
    </select>
    <div class="11">блок 1</div>
    <div class="22">блок 2</div>
    <div class="33">блок 3</div>
    <div class="44">блок 4</div>
    <div class="55">блок 5</div>
    <div class="66">блок 6</div>
    <div class="77">блок 7</div>
    <div class="88">блок 8</div>
    <div class="99">блок 9</div>
    <div class="100">блок 10</div>
    <div class="1110">блок 11</div>
    <div class="120">блок 12</div>
    <div class="130">блок 13</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.