JQuery влияет на все элементы с одинаковым именем - PullRequest
Новая
       2

JQuery влияет на все элементы с одинаковым именем

3 голосов
/ 04 февраля 2012

Это код в моем html-файле: 

    <div id="centerBlock">
        <block>
            <site style="padding-top: 10px; margin-left: 20px">
                <img src="./images/site1.png" alt="some_text"/>
            </site>
            <textOnImage style="padding-top: 10px; margin-left: 20px">
                lolol
            </textOnImage>
        </block>

        <block>
            <site style="padding-top: 163px; margin-left: 20px">
                <img src="./images/site1.png" alt="some_text"/>
            </site>
            <textOnImage style="padding-top: 163px; margin-left: 20px">
                lolol
            </textOnImage>
        </block>

    </div>

И это мой javascript: 

$("block").mouseenter(function(){        
    $("site").fadeTo("slow", 0.25);
    $("textOnImage").animate({ 
        opacity: "1"
    }, 600 );
});

$("block").mouseleave(function(){         
    $("site").fadeTo("slow", 1);
    $("textOnImage").animate({ 
        opacity: "0"
    }, 600 );
 });

Однако, когда я наводю курсор мыши на один из двух элементов блока, они обауменьшите непрозрачность, и когда я уберу мышь от нее, они оба вернутся в исходное состояние.Я искал часы, и я на 100% уверен, что искал неправильные термины.Как мне сделать их индивидуально?

Ответы [ 3 ]

4 голосов
/ 04 февраля 2012

Используйте this для нацеливания только на блок, вызвавший событие, а затем используйте .find(), чтобы найти нужный элемент в этом конкретном блоке.То, как вы делали это раньше, очевидно, находило все элементы site и все элементы textOnImage на всей странице, а не только те в блоке, который вызвал событие. 

$("block").mouseenter(function(){        
    var $this = $(this);
    $this.find("site").fadeTo("slow", 0.25);
    $this.find("textOnImage").animate({ 
        opacity: "1"
    }, 600 );
});

$("block").mouseleave(function(){         
    var $this = $(this);
    $this.find("site").fadeTo("slow", 1);
    $this.find("textOnImage").animate({ 
        opacity: "0"
    }, 600 );
 });
2 голосов
/ 04 февраля 2012

Попробуйте это (предоставьте контекст this для селектора jquery для нацеливания на определенные элементы): 

$("block").mouseenter(function(){        
    $("site", this).fadeTo("slow", 0.25);
    $("textOnImage", this).animate({ 
        opacity: "1"
    }, 600 );
});

$("block").mouseleave(function(){         
    $("site", this).fadeTo("slow", 1);
    $("textOnImage", this).animate({ 
        opacity: "0"
    }, 600 );
 });
2 голосов
/ 04 февраля 2012

Вам необходимо пройти в структуру наведенного элемента. Вы можете использовать .find() вот так ... 

$("block").mouseenter(function(){        
    $(this).find("site").fadeTo("slow", 0.25);
    $(this).find("textOnImage").animate({ 
        opacity: "1"
    }, 600 );
});

$("block").mouseleave(function(){         
    $(this).find("site").fadeTo("slow", 1);
    $(this).find("textOnImage").animate({ 
        opacity: "0"
    }, 600 );
 });

В обработчике события this является ссылкой на элемент, к которому привязан обработчик.

Вы могли бы также использовать .children() вместо .find(), поскольку целевые элементы имеют только один уровень глубины.

Примечание, вы можете использовать .hover() и передавать две функции, подобные этой .. 

$("block").hover(function(){        
    $(this).find("site").fadeTo("slow", 0.25);
    $(this).find("textOnImage").animate({ 
        opacity: "1"
    }, 600 );
},
  function(){         
    $(this).find("site").fadeTo("slow", 1);
    $(this).find("textOnImage").animate({ 
        opacity: "0"
    }, 600 );
});

Возможно, вы также захотите добавить несколько вызовов .stop() перед вашими вызовами fadeTo и animate, в противном случае при быстром наведении курсора анимации будут скопированы в очередь.

...