Question

单击关联标签时，我想为下面的图像设置边框颜色。有谁能够帮我？我已经尝试过使用jQuery，但它没有用...感谢您的帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

rank=>0

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

但是你必须为jQuery导入Cookie函数插件！

单击时设置边框颜色

2 个答案: