jQuery 代碼優化：合並重複的 hover 事件處理

優化前代碼片段

$('.img1').hover(function() {
    $('#bot').addClass('img-1');
}, function() {
    $('#bot').removeClass('img-1');
});

$('.img2').hover(function() {
    $('#bot').addClass('img-2');
}, function() {
    $('#bot').removeClass('img-2');
});

優化後：多選擇器合並邏輯

$('.img1, .img2').hover(function() {
    // 進入時：根據當前元素類名動態添加對應類
    $('#bot').addClass($(this).hasClass('img1') ? 'img-1' : 'img-2');
}, function() {
    // 離開時：同理移除
    $('#bot').removeClass($(this).hasClass('img1') ? 'img-1' : 'img-2');
});

優化要點

• 選擇器分組：$('.img1, .img2') 一次綁定，減少 DOM 遍歷與事件綁定開銷。
• 邏輯復用：利用 $(this).hasClass() 判斷觸發元素，動態構建類名，消除重複代碼。
• 可維護性：新增圖片只需添加類名並擴展三元表達式，或改用 data-* 屬性存儲目標類名，進一步解耦。

進階建議

<img class="img-item" data-target="img-1" src="...">
<img class="img-item" data-target="img-2" src="...">

$('.img-item').hover(function() {
    $('#bot').addClass($(this).data('target'));
}, function() {
    $('#bot').removeClass($(this).data('target'));
});

使用 data-target 屬性，實現結構與行為完全分離，擴展性最強。