Установить цвет границы при нажатии

Question

Я хочу установить цвет рамки для следующего изображения, когда я нажму соответствующую метку. Кто-нибудь может мне помочь? Я пробовал его с jQuery, но он не работал ... Спасибо за вашу помощь.

$("#fc-goal_1").click(function() { 
 
     $("#fc-goal_1").closest('#fc-goal_1').find('img').css("border", "2px solid rgb(99, 195, 195);"); 
 
    }); 
 
\t $("#fc-goal_2").click(function() { 
 
     $("#fc-goal_2").closest('#fc-goal_1').find('img').css("border", "2px solid rgb(99, 195, 195);"); 
 
    }); 
 
\t $("#fc-goal_3").click(function() { 
 
     $("#fc-goal_3").closest('#fc-goal_1').find('img').css("border", "2px solid rgb(99, 195, 195);"); 
 
    }); 
 
\t $('#fc-goal_4').click(function() { 
 
     $('#fc-goal_4').closest('#fc-goal_1').find('img').css('border', '2px solid rgb(99, 195, 195);'); 
 
    });

<div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
    <input checked="checked" id="muscle-goal_1" name="goal" class="goal" value="1" aria-required="true" type="radio"> 
 
    <label id="fc-goal_1" aria-controls="#muscle-goal_1"> 
 
     <img style="" src="/wp-content/uploads/2016/07/muskelaufbau.jpg" alt="Blaaaaa"> 
 
     <span>Blaaaaa</span> 
 
    </label> 
 
</div> 
 
<div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
    <input checked="checked" id="weight-loss-goal_2" name="goal" class="goal" value="2" aria-required="true" type="radio"> 
 
    <label id="fc-goal_2" aria-controls="#weight-loss-goal_2"> 
 
     <img src="/wp-content/uploads/2016/07/abnehmen.jpg" alt="Blaaaaa"> 
 
     <span>Blaaaaa</span> 
 
    </label> 
 
</div> 
 
<div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
    <input checked="checked" id="figure-workout-goal_3" name="goal" class="goal" value="3" aria-required="true" type="radio"> 
 
    <label id="fc-goal_3" aria-controls="#figure-workout-goal_3"> 
 
     <img src="/wp-content/uploads/2016/07/figurentraining.jpg" alt="Blaaaaa"> 
 
     <span>Blaaaaa</span> 
 
    </label> 
 
</div> 
 
<div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
    <input checked="checked" id="health-goal_4" name="goal" class="goal" value="4" aria-required="true" type="radio"> 
 
    <label id="fc-goal_4" aria-controls="#health-goal_4"> 
 
     <img src="/wp-content/uploads/2016/07/gesundheit.jpg" alt="Blaaaaa"> 
 
     <span>Blaaaaa</span> 
 
    </label> 
 
</div> 
 
<div class="error_content_box"> 
 
    <div style="visibility: hidden;" class="error"></div> 
 
</div>

Answer 1

Вы должны удалить closest() вызов, как вы, глядя вверх от элемента, который вы хотите найти, поэтому он никогда не найдет ничего. Вам также необходимо удалить трейлинг-код ; в параметре значения css().

Также обратите внимание, что вы можете легко изменить свой код, чтобы следовать лучшим практикам, таким как DRY, чтобы он работал лучше, упрощал его обслуживание и сокращение.

Сначала разместите общий класс на всех элементах #fc-goal_X, а затем используйте один обработчик событий для всех из них, используя ключевое слово this, чтобы ссылаться на элемент, который поднял событие. Вы также должны избегать ввода встроенного CSS в свой код, будь то напрямую или по телефону css(). Вместо этого используйте классы.

Что я могу сделать, чтобы сделать только проверенный с цветом границы?

В этом случае вам просто нужно удалить класс из всех других элементов, прежде чем добавить в щелкнул один, как это:

$(".fc-goal").click(function() { 
 
    $(".fc-goal img").removeClass('active'); 
 
    $(this).find('img').addClass('active'); 
 
});

.active { 
 
    border: 2px solid rgb(99, 195, 195) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
    <input checked="checked" id="muscle-goal_1" name="goal" class="goal" value="1" aria-required="true" type="radio"> 
 
    <label id="fc-goal_1" class="fc-goal" aria-controls="#muscle-goal_1"> 
 
    <img style="" src="/wp-content/uploads/2016/07/muskelaufbau.jpg" alt="Blaaaaa"> 
 
    <span>Blaaaaa</span> 
 
    </label> 
 
</div> 
 
<div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
    <input checked="checked" id="weight-loss-goal_2" name="goal" class="goal" value="2" aria-required="true" type="radio"> 
 
    <label id="fc-goal_2" class="fc-goal" aria-controls="#weight-loss-goal_2"> 
 
    <img src="/wp-content/uploads/2016/07/abnehmen.jpg" alt="Blaaaaa"> 
 
    <span>Blaaaaa</span> 
 
    </label> 
 
</div> 
 
<div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
    <input checked="checked" id="figure-workout-goal_3" name="goal" class="goal" value="3" aria-required="true" type="radio"> 
 
    <label id="fc-goal_3" class="fc-goal" aria-controls="#figure-workout-goal_3"> 
 
    <img src="/wp-content/uploads/2016/07/figurentraining.jpg" alt="Blaaaaa"> 
 
    <span>Blaaaaa</span> 
 
    </label> 
 
</div> 
 
<div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
    <input checked="checked" id="health-goal_4" name="goal" class="goal" value="4" aria-required="true" type="radio"> 
 
    <label id="fc-goal_4" class="fc-goal" aria-controls="#health-goal_4"> 
 
    <img src="/wp-content/uploads/2016/07/gesundheit.jpg" alt="Blaaaaa"> 
 
    <span>Blaaaaa</span> 
 
    </label> 
 
</div> 
 
<div class="error_content_box"> 
 
    <div style="visibility: hidden;" class="error"></div> 
 
</div>

Answer 2

Ницца, я решил он с печеньем: D

var body_goal_cookie = Cookies.get('body-goal'); 
 
    $('#' + body_goal_cookie).find('img').toggleClass('active'); 
 
    $('.questions').find('label').each(function() { 
 
     $(this).click(function() { 
 
      $('.questions').find('label').find('img').removeClass(); 
 
      $(this).find('img').toggleClass('active'); 
 
      Cookies.set('body-goal', $(this).attr('id')); 
 
     }); 
 
    });

.questions-fc-1 img { 
 
    border: 2px solid transparent; 
 
    box-sizing: border-box; 
 
} 
 
.questions-fc-1 img.active { 
 
    border: 2px solid rgb(99, 195, 195); 
 
    box-sizing: border-box; 
 
}

Но вам нужно импортировать плагин функции Cookie для jQuery!