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

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 时，我希望将特定块的“加号”文本更改为“减号”（$this）。

我试过：

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

但是那没有用 - 有什么建议吗？

在这里小提琴：http: //jsfiddle.net/ANRfT/

Answer 1

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

//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');
}

小提琴

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');
}

演示

Answer 4

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

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