Javascript - Wie man dies in eine einfache Funktion umwandelt

Question

$(document).ready(function() 
    { 
     // $('.pull-me').click(function() 
     // { 
     //  $('.login').slideToggle('slow') 
     // }); 

     $('#thumbnail1').mouseenter(function() 
     { 
      $('#thumbnailTitle1').css('visibility', 'visible') 
     }); 
     $('#thumbnail1').mouseleave(function() 
     { 
      $('#thumbnailTitle1').css('visibility', 'hidden') 
     }) 


     $('#thumbnail2').mouseenter(function() 
     { 
      $('#thumbnailTitle2').css('visibility', 'visible') 
     }); 
     $('#thumbnail2').mouseleave(function() 
     { 
      $('#thumbnailTitle2').css('visibility', 'hidden') 
     }) 


     $('#thumbnail3').mouseenter(function() 
     { 
      $('#thumbnailTitle3').css('visibility', 'visible') 
     }); 
     $('#thumbnail3').mouseleave(function() 
     { 
      $('#thumbnailTitle3').css('visibility', 'hidden') 
     }) 
    }); 

Ich bin sehr neu in Javascript, aber versuche zu lernen. Mir ist bewusst, dass dies jQuery ist, aber ich würde gerne wissen, ob es einen schnelleren Weg gibt, diesen Code zu machen, wie zum Beispiel eine kleinere Funktion, die ich aufrufen kann, um den Text anzuzeigen/auszublenden.

Da werde ich mehr Thumbnails hinzufügen und ich möchte nicht für jedes Foto und Text, die ich auf dem Foto anzeigen, alles schreiben müssen.

Answer 1

Verwenden Sie Klassen anstelle von IDs, wenn Sie ähnliche Elemente mit einem Verhalten ausrichten möchten.

Die Funktion selbst ist korrekt. Das Problem ist, dass Sie Ihren HTML-Code mit eindeutigen IDs für jedes Bild strukturiert haben. Der Versuch, das Problem zu beheben, indem Funktionen geschrieben werden, die auf Ihre eindeutigen IDs abzielen, ist der falsche Ansatz. Das zugrunde liegende Problem besteht darin, dass Sie IDs verwenden, um das Element an erster Stelle anzusteuern.

$(document).ready(function() { 

    $('.thumbnail').on('mouseenter', function() { 
    $(this).find('.thumbnail-title').css('visibility', 'visible'); 
    }) 

    $('.thumbnail').on('mouseleave', function() { 
    $(this).find('.thumbnail-title').css('visibility', 'hidden'); 
    }) 

}); 

Im Codeausschnitt oben Sie, dass jedes Element mit einer Klasse von thumbnail ausgewählt wird sehen können. Wenn der Benutzer den Mauszeiger über eine Miniaturansicht bewegt, können Sie auf das aktuell verschobene Element verweisen (mit $(this)) und das untergeordnete Element mit der Klasse thumbnail-title finden.

Dies ist der einfachste Ansatz zum Teilen von Verhalten über Elemente desselben Typs.

Hier ist eine Arbeits Geige: https://jsfiddle.net/wq5r97ep/2/

EDIT: Sie können natürlich abstrakt diese weg in ein Plugin oder nur eine allgemeine Funktion. Aber das ist die Grundidee.

Answer 2

Mit JQuery

$('#thumbnail3').mouseleave(function(e) 
     { 
      $(e.target).hide(); 
     }) 

CSS.

#thumbnail3:hover {display:none} 

Answer 3

können Sie verwenden, um ein einzelnen Ereignishandler binden Multiple Selector verwenden, im Ereignishandler erstellen die gezielte Selektor der aktuelle Element this id Eigenschaft.

$('#thumbnail1, #thumbnail2, #thumbnail3').hover(function(){ 
    var selector='#thumbnailTitle'+ this.id.replace(/[^\d.]/g,''); 
    $(selector).css('visibility','visible'); 
}, function(){ 
    var selector='#thumbnailTitle'+this.id.replace(/[^\d.]/g,''); 
    $(selector).css('visibility','hidden'); 
}) 

Allerdings empfehle ich Ihnen, würde die Beziehung Attribut mithilfe von benutzerdefinierten data-* Präfix zu etablieren. Hier Beispiel

$('.thumbnail').hover(function() { 
 
    $('#' + this.dataset.target).toggleClass('hidden'); 
 
}, function() { 
 

 
    $('#' + this.dataset.target).toggleClass('hidden'); 
 
})

.hidden { 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="thumbnail" data-target="thumbnailTitle1">thumbnail 1</span> 
 
<span class="thumbnail" data-target="thumbnailTitle2">thumbnail 2</span> 
 
<span class="thumbnail" data-target="thumbnailTitle3">thumbnail 3</span> 
 

 

 
<div class="hidden" id="thumbnailTitle1">thumbnailTitle1</div> 
 
<div class="hidden" id="thumbnailTitle2">thumbnailTitle2</div> 
 
<div class="hidden" id="thumbnailTitle3">thumbnailTitle3</div>

Answer 4

Etwas wie folgt aus:

function handleEventsFor(index) { 
    $('#thumbnail' + index).mouseenter(function() { 
    $('#thumbnailTitle' + index).css('visibility', 'visible') 
    }); 
    $('#thumbnail' + index).mouseleave(function() { 
    $('#thumbnailTitle' + index).css('visibility', 'hidden') 
    }) 
} 

Und es so nennen:

handleEventsFor(1); 
handleEventsFor(2); 

Oder wie folgt aus:

for(var i = 0; i < 5; ++i) { 
    handleEventsFor(i); 
} 

Answer 5

Das Ganze in eine Schleife schreiben ist eine Option.

for(var i = 1; i <= whatever_your_length_is; i++) { 
    $('#thumbnail' + i).mouseenter(function() { 
    $('#thumbnailTitle' + i).css('visibility', 'visible'); 
    }; 

    $('#thumbnail' + i).mouseleave(function() { 
    $('#thumbnailTitle' + i).css('visibility', 'hidden'); 
    }); 
} 

Answer 6

Folgendes ist eine Option.

(function($, window, undefined) { 
 

 
    var handle_mouse_events = function handle_mouse_events(thumbnail_selector, thumbnail_title_selector) { 
 
    
 
    $(thumbnail_selector).mouseenter(
 
     function() { 
 
     $(thumbnail_title_selector).css('visibility', 'visible'); 
 
     } 
 
    ); 
 
    
 
    $(thumbnail_selector).mouseleave(
 
     function() { 
 
     $(thumbnail_title_selector).css('visibility', 'hidden'); 
 
     } 
 
    ); 
 
    
 
    }; 
 
    
 
    handle_mouse_events('#thumbnail1', '#thumbnailTitle1'); 
 
    handle_mouse_events('#thumbnail2', '#thumbnailTitle2'); 
 
    handle_mouse_events('#thumbnail3', '#thumbnailTitle3'); 
 

 
})(jQuery, this);

.image_container > div { 
 
    display : inline-block; 
 
    width : 150px; 
 
    height : 200px; 
 
} 
 

 
span { 
 
    visibility : hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="image_container"> 
 
    <div id="thumbnail1"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /> 
 
    <span id="thumbnailTitle1">Title #1</span> 
 
    </div> 
 
    <div id="thumbnail2"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /> 
 
    <span id="thumbnailTitle2">Title #2</span> 
 
    </div> 
 
    <div id="thumbnail3"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /> 
 
    <span id="thumbnailTitle3">Title #3</span> 
 
    </div> 
 
</div>

Answer 7

würde ich eine einfache visibleHover Plugin für sie schreibt. Unter Verwendung wird es

$(selectorForThumbnails).visibleHover(selectorForText); 

Oder wie das Beispiel wie diese Arbeit zeigt

// '.thumbnail' is the class of the parent elements 
// 'span' is the selector for the children text elements 
$('.thumbnail').visibleHover('span'); 

Sie diese Eingaben anpassen können eine beliebige HTML-Struktur entsprechen, die Sie haben.

Klicken Sie auf die Run Code-Schnipsel Button es

---

(function($) { 
 
    $.fn.visibleHover = function(selector) { 
 
    return this.each(function(idx, elem) { 
 
     $(elem).hover(
 
     function() { $(selector, elem).css('visibility', 'visible'); }, 
 
     function() { $(selector, elem).css('visibility', 'hidden'); } 
 
    ); 
 
    }); 
 
    }; 
 
})(jQuery); 
 
    
 
$('.thumbnail').visibleHover('span');

.thumbnail { 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 
.thumbnail .image { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #eee; 
 
} 
 
.thumbnail span { 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="thumbnail"> 
 
    <div class="image"></div> 
 
    <span>Text A</span> 
 
</div> 
 
<div class="thumbnail"> 
 
    <div class="image"></div> 
 
    <span>Text B</span> 
 
</div> 
 
<div class="thumbnail"> 
 
    <div class="image"></div> 
 
    <span>Text C</span> 
 
</div>

---

Answer 8

Sie arbeiten, um zu sehen, können auch so versuchen,

Können sagen, Ihre HTML

<div id="thumbnails"> 
    <div><img class="thumbnails" src="" /></div> 
    <div><img class="thumbnails" src="" /></div> 
    <div><img class="thumbnails" src="" /></div> 
    <div><img class="thumbnails" src="" /></div> 
</div> 

Jquery

$(document).ready(function(){ 

    $("#thumbnails").find('.thumbnails').mouseenter(function(){ 
     var visibility = $(this).css('visibility'); 

     if(visibility == 'hidden'){ 
      $(this).css('visibility', 'visible'); 
     } 
    }); 

    $("#thumbnails").find('.thumbnails').mouseleave(function(){ 
     var visibility = $(this).css('visibility'); 

     if(visibility == 'visible'){ 
      $(this).css('visibility', 'hidden'); 
     } 
    }); 
}); 

Answer 9

Referenzierung von ID (d.h. $ ('# thumbnailn')) ist sehr spezifisch. Sie können breitere Referenzen erstellen, indem Sie stattdessen auf Tags oder andere Attribute wie Klasse zugreifen.

Etwas wie:

HTML:

<div id="thumbnail1" class="thumbnails"><span id="thumbnailTitle1"></span>...</div> 
<div id="thumbnail1" class="thumbnails"><span id="thumbnailTitle2"></span>...</div> 
<div id="thumbnail1" class="thumbnails"><span id="thumbnailTitle3"></span>...</div> 

JavaScript:

$(".thumbnails").mouseenter(function() { 
    $(this).children("span").css('visibility', 'visible'); 
}).mouseleave(function() { 
    $(this).children("span").css('visibility', 'hidden'); 
}); 

Im obigen Beispiel zeige ich, wie eine Klasse referenzieren (dh (“$. Thumbnails ")) und ein Tag (zB" span ") mit JQuery