Question

我目前有一个mouseenter，我调用的函数可以执行一些不同的操作 - 在此函数中，我还希望从$ this div更改某个div的文本。

HTML：

//item 1
<div class="blockButton">
    <div class="blockButtonToggle">PLUS</div>
</div>

//item 2
<div class="blockButton">
    <div class="blockButtonToggle">PLUS</div>
</div>

//item 3 etc...
<div class="blockButton">
    <div class="blockButtonToggle">PLUS</div>
</div>

当悬停项目1,2,3我希望将“PLUS”文本更改为“MINUS”以获取特定块（$ this）。

我尝试过：

$('.blockButton div.blockButtonToggle').text( $(this).data('MINUS') );

然而，这没有用 - 有什么建议吗？

FIDDLE HERE： http://jsfiddle.net/ANRfT/

Answer 1

在绑定函数this的上下文中绑定事件处理程序时，将引用事件绑定的元素。您可以通过包装$(this)使其成为jQuery对象。包装元素后，您可以使用find方法获取元素中的.blockButtonToggle。接下来，您使用html()函数而不是text()来设置.blockButtonToggle元素的innerHtml。

//MOUSEOVER
$(".blockButton").mouseenter(function() {
    $(this).find(".blockButtonToggle").html("MINUS");
});

//MOUSEOUT
$(".blockButton").mouseleave(function() {
    $(this).find(".blockButtonToggle").html("PLUS");
});

工作示例 http://jsfiddle.net/ANRfT/1/

Answer 2

$('.blockButton div.blockButtonToggle').text('MINUS');

你可以做更多的事情：

$(".blockButton").on('mouseenter', textShow)
                 .on('mouseleave', textHide);

function textShow() {
    $(this).find('.blockButtonToggle').text('MINUS');
}

function textHide() {
    $(this).find('.blockButtonToggle').text('PLUS');
}

FIDDLE

Answer 3

你有很多错误。这是修复：

$(".blockButton").mouseenter(function() {
    //Calling function to show text
    textShow($(this).find(".blockButtonTips"));
})

//MOUSEOUT 
$(".blockButton").mouseleave(function() {
    //Calling function to hide text
    textHide($(this).find(".blockButtonTips"));
);

function textShow(elementId) {
    elementId.text('MINUS');
}

function textHide(elementId) {
    elementId.text('PLUS');
}

<强> Demo

Answer 4

http://jsfiddle.net/ANRfT/4/

        $('.blockButtonToggle').hover(function () {
$(this).text('MINUS');
        });
        $('.blockButtonToggle').mouseleave(function () {
$(this).text('PlUS');
        });

用jquery替换.class元素上的$ this tet

4 个答案: