製作jQuery代碼動態/更短

-1

我寫過簡單地在懸停中顯示div，爲此jQuery正在關注，我試圖讓它變爲動態，因此代碼保持同一行但出現錯誤，請問有人可以幫忙嗎？製作jQuery代碼動態/更短

$(".column-wrapper-main").mouseenter(function() { 
    $(".column-wrapper-hov1").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov1").css("opacity", "0"); 
}); 

$(".column-wrapper-main2").mouseenter(function() { 
    $(".column-wrapper-hov2").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov2").css("opacity", "0"); 
}); 
//Box 3 
$(".column-wrapper-main3").mouseenter(function() { 
    $(".column-wrapper-hov3").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov3").css("opacity", "0"); 
}); 

//Box 4 
$(".column-wrapper-main4").mouseenter(function() { 
    $(".column-wrapper-hov4").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov4").css("opacity", "0"); 
}); 
//Box 5 
$(".column-wrapper-main5").mouseenter(function() { 
    $(".column-wrapper-hov5").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov5").css("opacity", "0"); 
}); 
//Box 6 
$(".column-wrapper-main6").mouseenter(function() { 
    $(".column-wrapper-hov6").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov6").css("opacity", "0"); 
}); 
//Box 7 
$(".column-wrapper-main7").mouseenter(function() { 
    $(".column-wrapper-hov7").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov7").css("opacity", "0"); 
}); 
//Box 8 
$(".column-wrapper-main8").mouseenter(function() { 
    $(".column-wrapper-hov8").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov8").css("opacity", "0"); 
});

來源

2016-08-23 Sanjeev Kumar

哪裏是HTML？ –

你有什麼錯誤？ – chazsolo

爲什麼不將類應用於所有元素？

$('.column-effect').on('mouseenter mouseleave', function(e) { 
    $(".column-wrapper-hov" + $(e.delegateTarget).attr('data-index')).css("opacity", e.type == 'mouseenter' ? 1 : 0); 
});

，並指定每個元素的數據屬性，像這樣：

<div class="column-wrapper-main column-effect" data-index="1"></div>

再次回顧這一點，我甚至不會使用JavaScript作業。簡單的CSS就足夠了：

.column-effect { 
    opacity : 0; 
} 
    .column-effect:hover { 
     opacity: 1 
    }

來源

2016-08-23 12:01:12 Tim

所有這些應該使用相同的類，沒有數字。您只需在給定的上下文中引用選擇器即可。這隻適用於嵌套。

$(".column-wrapper-main").mouseenter(function() { 
    $(".column-wrapper-hov", $(this)).css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov",$(this)).css("opacity", "0");; 
});

如果它們沒有嵌套，則可以使用data屬性來獲取目標ID。

$(".column-wrapper-main").mouseenter(function() { 
    var target = $(this).data('target'); 
    $(target).css("opacity", "1"); 
    }).mouseleave(function() { 
    var target = $(this).data('target'); 
    $(target).css("opacity", "0"); 
});

來源

2016-08-23 11:59:12

假設'column-wrapper-hov'包含在'column-wrapper-main'內。 –

假設divs是嵌套的，否則這是行不通的 – Bert

我不確定你的HTML佈局，所以我無法廣泛測試這個，但這可能適用於你。

$("[class^=column-wrapper-main]").mouseenter(function() { 
    var letter = ($(this).attr('class')) 
    var combined = ".column-wrapper-hov" + letter.substr(letter.length - 1); 
    $(combined).css("opacity", "1"); 
    }).mouseleave(function() { 
    var letter = ($(this).attr('class')) 
    var combined = ".column-wrapper-hov" + letter.substr(letter.length - 1); 
    $(combined).css("opacity", "0"); 
});

來源

2016-08-23 12:06:00

首先，從class名中index並添加id它。和重構你的HTML這樣的事情

<div class="column-wrapper-main" id="column-wrapper-main-1"> 
    <!-- Bla bla bla --> 
</div> 
<div class="column-wrapper-main" id="column-wrapper-main-2"> 
    <!-- Bla bla bla --> 
</div>

然後在JS/jQuery的你可以遍歷像

$('.column-wrapper-main').mouseenter(function() { 
    var number = $(this).attr('id').split('-')[3]; 
    $(".column-wrapper-hov" + number).css("opacity", "1"); 
}).mouseleave(function() { 
    var number = $(this).attr('id').split('-')[3]; 
    $(".column-wrapper-hov" + number).css("opacity", "0"); 
});

來源

2016-08-23 12:17:28

製作jQuery代碼動態/更短

回答

相關問題