مسج صنع إخفاء كل/عرض هذا شعبة صورة أكثر عمومية
https://stackoverflow.com/questions/353772
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
لدي التالية رمز مسج.
في الأساس سوف يكون عدة تتداخل divs قائمة من الروابط على اليمين من كل تلك تتداخل divs.عندما تحوم فوق وصلة وصلة المخصصة div سوف تتلاشى.
لدي البرمجية التالية ويعمل (يستخدم windows الافتراضي' عينة من الصور), ولكن إذا كان شخص ما يمكن أن نفكر في وسيلة لتحسين عليها أو جعلها عامة ، سأقدر.
<html>
<script type="text/javascript">
$(document).ready(function() {
$("#trigger1").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divsunset").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divsunset").fadeIn(500);
});
$("#trigger2").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divwinter").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divwinter").fadeIn(500);
});
$("#trigger3").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divbh").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divbh").fadeIn(500);
});
$("#trigger4").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divwl").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divwl").fadeIn(500);
});
});
</script>
<style>
#divsunset
{
position: absolute;
top: 5px;
left: 5px;
}
#divwinter
{
position: absolute;
top: 5px;
left: 5px;
}
#divbh
{
position: absolute;
top: 5px;
left: 5px;
}
#divwl
{
position: absolute;
top: 5px;
left: 5px;
}
#links
{
position: absolute;
top: 800px;
left: 700px;
}
.inactive
{
}
</style>
شكرا لك مات ، TM و كرون ، ردودكم ساعدت حقا.
أنا لا أشعر أنني شرحت نفسي تماما ، ولكن TM تقدم الجواب الذي كنت أبحث عنه.
أردت أن تتبع الجافة و الرمز TM المقدمة ساعدني أفضل هذه المرة لأنها لا تتطلب مني أن يغير ذلك من العلامات ، مجرد رمز مسج.
مرة أخرى شكرا جزيلا.مدهش كيف بسرعة حصلت على الجواب.استمروا في العمل العظيم.
المحلول
أول شيء يمكنك القيام به لجعله الأنظف هو استبدال كل تلك دعوات مماثلة مع شيء أكثر عمومية.
(ملاحظة:نفترض كل هذا داخل document.ready())
$('#trigger1').data('target', '#divsunset');
$('#trigger2').data('target', '#divwinter');
$('#trigger3').data('target', '#divbh');
$('#trigger4').data('target', '#divwl');
$('#trigger1,#trigger2,#trigger3,#trigger4').mouseover(function() {
var selector = $(this).data('target');
$(".contentdiv").addClass("inactive");
$(selector).removeClass("inactive");
$(".inactive").fadeOut(500);
$(selector).fadeIn(500);
});
باستخدام بفواصل محددات هو وسيلة رائعة على طاعة الجافة مع مسج.
يمكنني استخدام $(element).data() تعيين واسترداد بعض البيانات على عنصر في هذه الحالة محدد استخدامها لتحديث العنصر المناسب.
أيضا, فقط نظافة البصرية تبدو, يمكنك استخدام ما يلي في مكان $(document).ready(), إذا كنت تفضل ذلك.إنه نفس الشيء, مجرد جملة مختلف.
$(function() {
//DOM ready
};
نصائح أخرى
لقد أجاب على سؤال مماثل قبل عدة أشهر مسج مبادلة العناصر إذا كان ذلك يساعد.
مات
Clarrification ، حيث لدي {id:'1'} يجب أن المبادلة في معرف div كنت تريد أن تظهر وجعل عامة اسم فئة على أخرى DIV لإخفائها.
تذكر أنه يمكنك تطبيق mulitple دروس عنصر:
<Div class="name1 name2"></div>
مما قد يساعد إذا كان لديك نمط القواعد المرفقة الأصلي divs.
انها جيدة ، ولكن سوف تحتاج إلى أكثر عمومية نهج id لقد تعيينه.
أسرع الحل الذي يتبادر إلى الذهن هو أن يختتم تتداخل divs أن تتلاشى في ظل شعبة الأم "#ملفوفة".اتخاذ جميع الروابط وتعيينها الطبقات CSS 'الزناد اسم' حيث 'اسم' هو 'غروب الشمس ، 'الشتاء' ، إلخ.ثم يمكنك أن تفعل شيئا مثل:
$(document).ready(function() {
$(".trigger").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#wrapper ." + $(this).attr('class')[1]).removeClass("inactive");
$(".inactive").fadeOut(500);
$("#wrapper ." + $(this).attr('class')[1]).fadeIn(500);
});
انها ليست أفضل حل ممكن ، ولكن نأمل أن يعطيك فكرة.
