removeClass如果addClass被點擊了嗎？

如果點擊一個新的排名，我們如何自動去掉之前的點擊？removeClass如果addClass被點擊了嗎？

<%= f.hidden_field(:ranking, id: 'ranking') %> 
<%= image_tag('4.png', data: { ranking: 4 }, class: 'image-clicker') %> 
<%= image_tag('3.png', data: { ranking: 3 }, class: 'image-clicker') %> 
<%= image_tag('2.png', data: { ranking: 2 }, class: 'image-clicker') %> 
<%= image_tag('1.png', data: { ranking: 1 }, class: 'image-clicker') %> 

<script> 
    $('.image-clicker').click(function() { 
    $('#ranking').val($(this).data('ranking')); 
    if ($('#ranking').hasClass('clicked')){ #Conditional doesn't work. If user clicks on second image the first image will stay clicked 
     $('.clicked').removeClass('clicked') 
    }else{ 
     $(this).addClass('clicked'); 
    } 
    }); 
</script>

我試圖合併來自這裏的答案：removeClass() if it exists，但他們沒有爲我工作。

來源

2016-05-05 AnthonyGalli.com

你試過用toggleClass（）方法嗎？ – uday

是啊@uDaY我試過'$'''排名'）。toggleClass（'clicked'）;' –

嘗試和緩存你的jQuery選擇到性能變量，例如$排名和$這 –

的「click」事件被分配到你的「圖像唱首歌」元素中，但「點擊」類添加到隱藏字段。元素引用被混淆了，並且代碼需要檢查圖像是否已被點擊。

這可能是更接近你想要做什麼：

<script> 
    $('.image-clicker').click(function() { 
    $('#ranking').val($(this).data('ranking')); 
    var already_clicked = $(this).hasClass('clicked'); 
    $('.clicked').removeClass('clicked') 
    if (!already_clicked) { 
     $(this).addClass('clicked'); 
    } 
    }); 
</script>

的already_clicked檢查確定圖像已被點擊，它可以清除現有的「後告知是否繼續點擊點擊其他圖像中的課程。

請注意，這將允許所有圖像變成'未點擊'。如果你希望它的行爲像單選按鈕一樣，你可以省去already_clicked的檢查，並且總是將「clicked」類添加到被單擊的元素。這將做到這一點：

<script> 
    $('.image-clicker').click(function() { 
    $('#ranking').val($(this).data('ranking')); 
    $('.clicked').removeClass('clicked') 
    $(this).addClass('clicked'); 
    }); 
</script>

在這種情況下，你可能還想在已知的狀態下啓動你的單選按鈕。在原始標記（ERB）中，您希望將「已點擊」類添加到image_tag元素之一。您只需在「點擊」類添加到圖像中的一個在創建時，就像這樣：

<%= f.hidden_field(:ranking, id: 'ranking') %> 
<%= image_tag('4.png', data: { ranking: 4 }, class: 'image-clicker clicked']) %> 
<%= image_tag('3.png', data: { ranking: 3 }, class: 'image-clicker') %> 
<%= image_tag('2.png', data: { ranking: 2 }, class: 'image-clicker') %> 
<%= image_tag('1.png', data: { ranking: 1 }, class: 'image-clicker') %>

你也可以這樣做動態的基礎上，從模型中的變量或字段的值。假設一個名爲ranking變量包含此值，考慮這個初始化代碼：

<%= f.hidden_field(:ranking, id: 'ranking') %> 
<%= image_tag('4.png', data: { ranking: 4 }, class: 'image-clicker' + (ranking == '4' ? ' clicked' : '')) %> 
<%= image_tag('3.png', data: { ranking: 3 }, class: 'image-clicker' + (ranking == '3' ? ' clicked' : '')) %> 
<%= image_tag('2.png', data: { ranking: 2 }, class: 'image-clicker' + (ranking == '2' ? ' clicked' : '')) %> 
<%= image_tag('1.png', data: { ranking: 1 }, class: 'image-clicker' + (ranking == '1' ? ' clicked' : '')) %>

來源

2016-05-05 18:18:30

謝謝邁克爾！你的後一個答案是有效的：]是單選按鈕是描述我正在尋找的行爲的好方法 –

將你的代碼的document.ready

<script> 
    $(document).ready(function(){ 


     //Place your javascript /jquery code here 

    }) 
</script>

來源

2016-05-05 18:06:22

試過Aju。行爲沒有差異。一旦圖像被點擊，即使點擊新圖像，它仍然會被點擊。感謝您的嘗試！ –

得到了問題..id =排名和class = image-clicker都是不同的標籤。不是嗎？ –

我這麼認爲。不完全確定你的意思是不同的標籤 –

我覺得阿菊約翰是正確的。但也許有一點額外的提示。

您在點擊事件後使用$（this）幾行。根據我的經驗，最好聲明一個變量並將$（this）賦值給該變量。如果您不這樣做，您可能會在使用之前更改$（this）值。我做什麼：

$('.image-clicker').click(function(){ 
{ 
    var r = $(this); 
    $('.image-clicker').removeClass('clicked'); 
    r.addClass('clicked') 
}

爲什麼你檢查你的隱藏FILD爲「點擊」類？你不應該檢查圖像答題器嗎？

來源

2016-05-05 18:21:11 kenhas

感謝您的時間kenhas！我和邁克爾一起去了，因爲我無法讓你的工作，但感謝關於'this'的提示：] –

removeClass如果addClass被點擊了嗎？

回答

相關問題