不要更新懸停事件的多個div

Question

我使用html，css & js寫一個簡短的調查。我想問一個問題，然後讓用戶以1-5的比例進行評分。

理想情況下，我希望秤的響應速度很快，所以如果將鼠標懸停在1以上，它會變成黃色。如果將鼠標懸停在2上，它會將1和2都變成黃色。如果將鼠標懸停在3以上，則前3個框會變成黃色。你明白了。

當調查中只有一個問題時，這很有效，但問題的數量可能未知（且冗長）。

我希望我可以使用相同的JS函數和css類，但是當我將鼠標懸停在頁面上的問題上時，頁面上的所有問題都會更新爲黃色。這樣做的最好方法是什麼，以便每個答案只能單獨更新，而不是整個頁面？

繼承人當前HTML代碼：

  <table> 
      <thead> 
       <tr> 
        <td>Overall</td> 
        <td></td> 
        <td></td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Question 1</td> 
        <td width="300px"> 
         <div class="scale-text">No Rating</div> 
         <div class="scale-1"></div> 
         <div class="scale-2"></div> 
         <div class="scale-3"></div> 
         <div class="scale-4"></div> 
         <div class="scale-5"></div> 
        </td> 
        <td>Comment</td> 
       </tr> 
       <tr> 
        <td>Question 2</td> 
        <td width="300px"> 
         <div class="scale-text"></div> 
         <div class="scale-1"></div> 
         <div class="scale-2"></div> 
         <div class="scale-3"></div> 
         <div class="scale-4"></div> 
         <div class="scale-5"></div> 
        </td> 
        <td>Comment</td> 
       </tr>     
      </tbody> 
     <table> 

和JS：

<script> 
$(function() { 
    $('.scale-1').hover(function() { 
     $('.scale-1').css('background-color', 'yellow'); 
     $('.scale-text').html("Strongly Disagree"); 
    }, function() { 
     // on mouseout, reset the background colour 
     $('.scale-1').css('background-color', ''); 
     $('.scale-text').html("No Rating"); 
    }); 
}); 

$(function() { 
    $('.scale-2').hover(function() { 
     $('.scale-1').css('background-color', 'yellow'); 
     $('.scale-2').css('background-color', 'yellow'); 
     $('.scale-text').html("Disagree"); 
    }, function() { 
     // on mouseout, reset the background colour 
     $('.scale-1').css('background-color', ''); 
     $('.scale-2').css('background-color', ''); 
     $('.scale-text').html("No Rating"); 
    }); 
}); 

$(function() { 
    $('.scale-3').hover(function() { 
     $('.scale-1').css('background-color', 'yellow'); 
     $('.scale-2').css('background-color', 'yellow'); 
     $('.scale-3').css('background-color', 'yellow'); 
     $('.scale-text').html("Neutral"); 
    }, function() { 
     // on mouseout, reset the background colour 
     $('.scale-1').css('background-color', ''); 
     $('.scale-2').css('background-color', ''); 
     $('.scale-3').css('background-color', ''); 
     $('.scale-text').html("No Rating"); 
    }); 
}); 

$(function() { 
    $('.scale-4').hover(function() { 
     $('.scale-1').css('background-color', 'yellow'); 
     $('.scale-2').css('background-color', 'yellow'); 
     $('.scale-3').css('background-color', 'yellow'); 
     $('.scale-4').css('background-color', 'yellow'); 
     $('.scale-text').html("Agree"); 
    }, function() { 
     // on mouseout, reset the background colour 
     $('.scale-1').css('background-color', ''); 
     $('.scale-2').css('background-color', ''); 
     $('.scale-3').css('background-color', ''); 
     $('.scale-4').css('background-color', ''); 
     $('.scale-text').html("No Rating"); 
    }); 
}); 

$(function() { 
    $('.scale-5').hover(function() { 
     $('.scale-1').css('background-color', 'yellow'); 
     $('.scale-2').css('background-color', 'yellow'); 
     $('.scale-3').css('background-color', 'yellow'); 
     $('.scale-4').css('background-color', 'yellow'); 
     $('.scale-5').css('background-color', 'yellow'); 
     $('.scale-text').html("Strongly Agree"); 
    }, function() { 
     // on mouseout, reset the background colour 
     $('.scale-1').css('background-color', ''); 
     $('.scale-2').css('background-color', ''); 
     $('.scale-3').css('background-color', ''); 
     $('.scale-4').css('background-color', ''); 
     $('.scale-5').css('background-color', ''); 
     $('.scale-text').html("No Rating"); 
    }); 
}); 

Answer 1

可以簡化爲下面的代碼。

當你將鼠標懸停在一個元素，你需要使用this（它指的是目前徘徊元素）找到相關的元素引用

$(function() { 
 
    var scaletext = { 
 
    1: 'SA', 
 
    2: 'A', 
 
    3: 'N', 
 
    4: 'Da', 
 
    5: 'SDa' 
 
    } 
 
    $('.scale').hover(function() { 
 
    var $this = $(this); 
 
    $this.prevAll('.scale').addBack().css('background-color', 'yellow'); 
 
    $this.siblings('.scale-text').html(scaletext[$this.data('scale')]); 
 
    }, function() { 
 
    var $this = $(this); 
 
    $this.prevAll('.scale').addBack().css('background-color', ''); 
 
    $this.siblings('.scale-text').html("No Rating"); 
 
    }); 
 
});

td > div.scale { 
 
    padding: 5px; 
 
    background-color: lightgrey; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <td>Overall</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Question 1</td> 
 
     <td width="300px"> 
 
     <div class="scale-text">No Rating</div> 
 
     <div data-scale="1" class="scale scale-1"></div> 
 
     <div data-scale="2" class="scale scale-2"></div> 
 
     <div data-scale="3" class="scale scale-3"></div> 
 
     <div data-scale="4" class="scale scale-4"></div> 
 
     <div data-scale="5" class="scale scale-5"></div> 
 
     </td> 
 
     <td>Comment</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Question 1</td> 
 
     <td width="300px"> 
 
     <div class="scale-text">No Rating</div> 
 
     <div data-scale="1" class="scale scale-1"></div> 
 
     <div data-scale="2" class="scale scale-2"></div> 
 
     <div data-scale="3" class="scale scale-3"></div> 
 
     <div data-scale="4" class="scale scale-4"></div> 
 
     <div data-scale="5" class="scale scale-5"></div> 
 
     </td> 
 
     <td>Comment</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Question 1</td> 
 
     <td width="300px"> 
 
     <div class="scale-text">No Rating</div> 
 
     <div data-scale="1" class="scale scale-1"></div> 
 
     <div data-scale="2" class="scale scale-2"></div> 
 
     <div data-scale="3" class="scale scale-3"></div> 
 
     <div data-scale="4" class="scale scale-4"></div> 
 
     <div data-scale="5" class="scale scale-5"></div> 
 
     </td> 
 
     <td>Comment</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Question 1</td> 
 
     <td width="300px"> 
 
     <div class="scale-text">No Rating</div> 
 
     <div data-scale="1" class="scale scale-1"></div> 
 
     <div data-scale="2" class="scale scale-2"></div> 
 
     <div data-scale="3" class="scale scale-3"></div> 
 
     <div data-scale="4" class="scale scale-4"></div> 
 
     <div data-scale="5" class="scale scale-5"></div> 
 
     </td> 
 
     <td>Comment</td> 
 
    </tr> 
 
    </tbody> 
 
    <table>

Answer 2

您可以選擇所有以前的jQuery中div的元素。

這裏是您的解決方案：

var frases = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly agree"]; 
$('.scale').hover(function() { 
    $(this).prevAll('.scale').css('background-color', 'yellow').end().css('background-color', 'yellow'); 
    $(this).prevAll('.scale-text').html(frases[$(this).data('value')-1]); 
}, function() { 
    // on mouseout, reset the background colour 
    $(this).prevAll('.scale').css('background-color', '').end().css('background-color', ''); 
    $(this).prevAll('.scale-text').html("No Rating"); 
}); 

https://jsfiddle.net/qpw7wof1/1/

Answer 3

就像scale添加一個CSS類的所有等級的元素並執行以下操作：

$(function() { 
    $('.scale').hover(function() { 
    var $previous = $(this); 
    while ($previous.length && $previous.hasClass('scale')) { 
     $previous.css('background-color', 'yellow'); 
     $previous = $previous.prev(); 
    } 
    }, function() { 
    var $previous = $(this); 
    while ($previous.length && $previous.hasClass('scale')) { 
     $previous.css('background-color', ''); 
     $previous = $previous.prev(); 
    } 
    }) 
}); 

Working Fiddle