javascript - 如何更改不同子类的弹出窗口宽度？

Question

    <span class="grandparent">
        <span class='parent'>
            <span id="popUP" class="child1">
                Some content for popUP
             </span> <!-- 1st child has width of 390px-->
        </span>    
    </span>

现在对于不同的选项，假设子 span 标签被新标签替换，如下所述。

     option A) <span id="popUP" class="child2"></span> 
             <!-- 2nd child has popUP width of 550px--> 
     option B) <span id="popUP" class="child3"></span>
             <!-- 3rd child has popUP width of 450px-->
     option C) <span id="popUP" class="child4"></span> 
              <!-- 4th child has popUP width of 350px-->

如何使用 JavaScript 或 jQuery 动态更改弹出窗口的宽度？？我尝试使用 .find() 方法，但没有成功

Answer 1

你不应该做这样的事情吗？你的 id 和 class 反之。

option A) <span class="popUP" id="child2"></span> 
            <!-- 2nd child has popUP width of 550px--> 
option B) <span class="popUP" id="child3"></span>
             <!-- 3rd child has popUP width of 450px-->
option C) <span class="popUP" id="child4"></span> 
              <!-- 4th child has popUP width of 350px-->

然后做这样的事情？

$("#child2").addClass("width2");

然后是CSS

.width2
{
width:550px;
}

考虑使用 div。我在某个地方读过 span ignore tags。并发布整个代码可能会有所帮助。