javascript - 我在让 jquery 根据类名插入 html 时遇到问题

Question

我正在努力解决的问题。 我想使用 jQuery 根据正在使用的类动态地将内容添加到 div 中。我不确定为什么警报不起作用。它可能是我的 html 或 jquery 本身。我想解决这个问题，以便我可以根据显示的类显示不同的文本。

这是 HTML

<td>
    <div class="po size3"></div>
    <a class="external">Find your doctor</a>
    <div class="p-accessible-alt"></div>
</td>

<td>
    <div class="po size4"></div>
    <a class="external">Find your doctor</a>
    <div class="p-accessible-alt"></div>
</td>

<td>
    <div class="po size5"></div>
    <a class="external">Find your doctor</a>
    <div class="p-accessible-alt"></div>
</td>

这是 jQuery

$(document).ready(function() {
    if ($(this).hasClass("size5")) {
        $("div.p-accessible-alt").html("<p> Blah Blah Size5</p>");
    } else if  
        ($(this).hasClass("size4")) {
        alert('TEST!!!');
        $("div.p-accessible-alt").html("<p> Blah Blah Size4</p>");
    } else if  
    ($(this).hasClass("size3")) {
        alert('TEST 3!!!');
        $("div.p-accessible-alt").html("<p> Blah Blah Size3</p>");
    }
});

Answer 1

您对 $(this) 的使用情况不会起作用，因为你还没有做出选择。在 JQuery 中 this始终绑定(bind)到前一个选择器或方法的上下文，它是一个包含选择或过滤器结果的 JQuery 对象。此外，用于查找要插入 HTML 的子元素的选择器范围太广。

$("div.p-accessible-alt").html("<p> Blah Blah Size3</p>");

它将选择每个 <div>类别为p-accessible-alt并将相同的 HTML block 插入到所有这些 block 中。

您可以使用以下选择器(每种尺寸一个)替换整个 if block 。

$(".size3").siblings(".p-accessible-alt").html("<p> Blah Blah Size3</p>");
$(".size4").siblings(".p-accessible-alt").html("<p> Blah Blah Size4</p>");
$(".size5").siblings(".p-accessible-alt").html("<p> Blah Blah Size5</p>");

这通过查找类 .sizeX 的元素来实现。然后向上遍历到它的父容器，然后向下返回层次结构以找到它的后代类 .p-accessible-alt然后应用 html。