Question

我想在所有没有“阻止”类的div中附加提到的标记

if( !($('td').hasClass('block')) ){
    $('.block').mouseover(function() {
        $(this).append('<small style="color:green">Available</small>');
    });
    $('.block').mouseout(function() {
       $('small').remove();
    });
}

Answer 1

像这样修改你的代码

$('td').on('mouseenter', function(){
 if(!($(this).hasClass('block'))){
	$(this).append('<small style="color:green">Available</small>');
	$('td').mouseout(function() {
		$('small').remove();
	});
   	}
});

td { width:150px; height:100px; float:left;background:#666; }

<table>
<tr>
	<td></td><td></td><td class="block"></td>
</tr>
</table>

Answer 2

您可以使用:not()选择器排除block类的所有元素，如下所示：

var myElement = $("<small class='smallMsg'>available</small>");
$('div:not(.block)').append(myElement);

div { border:1px solid #000; margin: 1em; padding: 1em; }
.smallMsg { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Lorem ipsum dolor sit.</div>
<div class="block">Aliquam similique, ad explicabo.</div>
<div>Voluptatem recusandae numquam, pariatur?</div>
<div class="block">Accusantium repellendus deleniti, animi.</div>
<div>Neque eum vitae amet.</div>

jsFiddle：https://jsfiddle.net/azizn/hsjs3hjc/

P.S我建议更具体地说明你的div以避免意外结果，例如，捕获divs容器内的所有#myGroup。

Answer 3

您可以使用选择器div获取没有课程block的所有div:not(.block)。这看起来像这样：

$("div:not(.block)").each(function() {
    $(this).append('<small class="appearOnHover">Available</small>');
});

对于出现和消失的效果，我建议使用CSS：

.appearOnHover {
    display: none;
}
div:hover > .appearOnHover {
    display: inline;
    color: green;
}

由于我是纯粹的js粉丝，这里也是纯javascript的解决方案：

var divs = document.querySelectorAll("div:not(.block)");
for (var i = 0; i < divs.length; i++) {
    var el = document.createElement("small");
    el.innerHTML = "Available";
    el.className = "appearOnHover";
    divs[i].appendChild(el);
}

Answer 4

为什么不改变这样的条件？

$('td').mouseover(function() {
    if($(this).hasClass('block'))
    $(this).append('<small style="color:green">Available</small>');
}).mouseout(function() {
    $(this).find('small').remove();
});

玩游戏： https://jsfiddle.net/sabkaraja/0o184u85/

我想在所有没有类'block'的div中附加提到的标记

4 个答案: