processmaker - javascript injection example

jQuery find div help

Question

Actualmente estoy construyendo una barra de menú que consiste en íconos que muestran un submenú contextual cuando está sobrevolado. Esencialmente, al pasar el puntero sobre un ícono, aparece un menú emergente / información sobre herramientas (con más opciones), pero también se puede hacer clic en el icono.

Hasta ahora, uso la siguiente construcción HTML y jQuery para cada elemento del menú:

<div id="profile" class="menu-item">
    <div id="profile-tip" class="tip">
        **insert profile menu options**
    </div>
</div>

<div id="search" class="menu-item">
    <div id="search-tip" class="tip">
        **insert search menu options**
    </div>
</div>

y

$(".menu-item").hover(function() {
    $(this).find("div").fadeIn("fast").show(); //add ''show()'''' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
    $(this).find("div").hide();
});
});

Lo que deseo hacer es cambiar el HTML para que se vea de la siguiente manera (para poder aplicar un enlace onClick al div de "perfiles"):

<div id="profile" class="menu-item" onclick="window.location = ''profile.php''"></div>
    <div id="profile-tip" class="tip">
        **insert menu options**
    </div>

Sin embargo, no sé cómo modificar el jQuery para encontrar el div correspondiente que se mostrará cuando se pase el cursor sobre él. La información sobre herramientas asociada / menú emergente div siempre será xxxx-tip (donde xxx es el nombre del div principal).

Como ejemplo, me imagino que se verá algo así (ten en cuenta que sé muy poco sobre jQuery, así que estoy muy consciente de que esto se verá estúpido):

$(".menu-item").hover(function() {
    $.find("div").attr(''id''+"-tip").fadeIn("fast").show(); //add ''show()'''' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
    $.find("div").attr(''id''+"-tip").hide();
});
});

Para resumir: necesito el jQuery modificado para mostrar el div basado en el ID del div principal + la cadena "-tip"

Espero que eso no sea demasiado confuso. Cualquier ayuda MEJOR apreciada :)

Answer 1

En lugar de encontrar el nombre del div en el PADRE de la cosa sobre la que estás suspendido, usa jQuery para encontrar la información sobre herramientas que es un NIÑO de lo que te rodea ... busca en el DOM, en lugar de UP.

Use el operador $ (this) de jQuery ...

$(''.menu-item'').hover(function(){
     $(this).find(''.tip).fadeIn();


},
function() {
    $(this).find(''.tip).fadeOut();
});

Answer 2

No estoy 100% claro en el objetivo aquí, pero puedes obtener tu div por ID como se muestra aquí:

$(".menu-item").hover(function()
{
    $(this).find(".tip").fadeIn("fast").show();
});

O en CSS:

.menu-item .tip
{
    display: none;
}

.menu-item .tip:hover,
.menu-item:hover .tip
{
    display: auto;
}

Answer 3

No estoy seguro de entender completamente lo que quiere, pero tal vez intente algo un poco más como este:

$(".menu-item").hover(
    function() {
        $(this).find(".tip").fadeIn("fast").show(); //add ''show()'''' for IE
    },
    function() { //hide tooltip when the mouse moves off of the element
        $(this).find(".tip").hide();
    }
);

Editar : si el elemento tip no es un elemento secundario del elemento div del menú, esto podría funcionar:

$(".menu-item").hover(
    function() {
        $(''#'' + this.id + ''-tip'').fadeIn("fast").show(); //add ''show()'''' for IE
    },
    function() { //hide tooltip when the mouse moves off of the element
        $(''#'' + this.id + ''-tip'').hide();
    }
);