Javascript 我在让jquery根据类名插入html时遇到了一个问题

我试图解决的问题。 我想使用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>");
    }
});

$（文档）.ready（函数（）{
if（$（this）.hasClass（“size5”））{
$（“div.p-accessible-alt”）.html（“Blah Blah Size5
”；
}否则如果
（$（this.hasClass（“size4”））{
警报（'TEST！！！'）；
$（“div.p-accessible-alt”）.html（“Blah Blah Size4
”；
}否则如果
（$（this.hasClass（“size3”））{
警报（“测试3！！！”）；
$（“div.p-accessible-alt”）.html（“Blah Blah Size3
”；
}
});

您对

$（此）

的使用无效，因为您尚未进行选择。在JQuery

中，此

始终绑定到上一个选择器或方法的上下文，它是包含选择或筛选结果的JQuery对象。此外，用于查找要插入HTML的子元素的选择器太宽

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

---

这是通过使用类

.sizeX

查找元素，然后遍历到它的父容器，然后返回层次结构，找到它的子元素，使用类

.p-accessible-alt

，然后对其应用html。

您根本不需要条件。您只需执行以下操作：

$(document).ready(function() {
    $(".size3").nextAll(".p-accessible-alt").html("Your HTML here");
    $(".size4").nextAll(".p-accessible-alt").html("Your HTML here");
    $(".size5").nextAll(".p-accessible-alt").html("Your HTML here");
});

---

以下是一些更通用的解决方案，并提供一些建议：

• 仅将类用于CSS或JavaScript和
• 我会选择一种通用的方法。因此，您可以添加或删除项目，而无需始终更改JavaScript代码。在这种情况下，最好使用属性来存储项数据，而不是将其添加到类中

$（'.js添加大小'）。每个（函数（）{
var jThis=$（本）；
var itemHtml='Blah Blah'+jThis.attr（'data-size'）；
jThis.find（'.js size item'）.html（itemHtml）；
});

找你的医生
找你的医生
找你的医生
一旦您取出（此）并引用selector.po，代码就会起作用，因为正如其他人所述，（此）实际上引用的是文档

             <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>

$(document).ready(function() {
    if ($(".po").hasClass("size5")) {
        $("div.plan-accessible-alt").html("<p> Blah Blah Size5</p>");
    } else if  
        ($(".po").hasClass("size4")) {
            $("div.plan-accessible-alt").html("<p> Blah Blah Size4</p>");
    } else if  
    ($(".po").hasClass("size3")) {
             $("div.plan-accessible-alt").html("<p> Blah Blah Size3</p>");
    }       
});


找你的医生
找你的医生
找你的医生
$（文档）.ready（函数（）{
如果（$（“.po”）.hasClass（“size5”））{
$（“div.plan-accessible-alt”）.html（“Blah Blah Size5
”；
}否则如果
（$（“.po”）.hasClass（“size4”））{
$（“div.plan-accessible-alt”）.html（“Blah Blah Size4
”；
}否则如果
（$（“.po”）.hasClass（“size3”））{
$（“div.plan-accessible-alt”）.html（“Blah Blah Size3
”；
}       
});
您在ready函数作用域中所说的
$（this）
是什么意思？？？
在
$（document）中所说的
this
。ready
将引用
document
对象，它没有样式类，因此
hasClass（）
将永远不会返回true。您是否打算将if语句放入某个click事件中？ie
$（“.po”）.click（）
.p-accessible-alt不是.size*的孩子，我喜欢这个答案，因为它看起来很干净；不过，我试过你的代码笔，它的
位看起来可能有问题。对我来说，上一个
.html
语句中的任何文本都将成为所有兄弟姐妹的文本。是的，对不起。我没在想。我已经更新了，可以正常工作了。太棒了！我正在使用OP的代码，虽然它有些功能，但遇到了相同的问题（一个条件更新了所有div）。novely done.OP正在尝试将html添加到.p-accessible-alt，而不是
             <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>

$(document).ready(function() {
    if ($(".po").hasClass("size5")) {
        $("div.plan-accessible-alt").html("<p> Blah Blah Size5</p>");
    } else if  
        ($(".po").hasClass("size4")) {
            $("div.plan-accessible-alt").html("<p> Blah Blah Size4</p>");
    } else if  
    ($(".po").hasClass("size3")) {
             $("div.plan-accessible-alt").html("<p> Blah Blah Size3</p>");
    }       
});