單擊時設置邊框顏色

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

但是你必須導入jQuery的Cookie功能插件！