Question

我们创建一个脚本，该脚本获取具有特定类的元素的innerhtml。这对于第一个<table>非常有效。但是该脚本不适用于第二个<table>。

我猜这是由于getElementbyID造成的。我们如何编辑脚本，使其适用于每个表？

HTML：

<table>
<tbody>
    <tr>
        <td class="image" rowspan="8">
            <div class="myedit" id="MyEdit"></div>
        </td>
        <td class="order" colspan="2">Text</td>
    </tr>
    <tr>
        <td>
            <div class="input-box">
                <ul id="options-183-list" class="options-list">
                    <li class="product-option active">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" checked="" name="options[183]" id="options_183_2" value="591" price="0">
                        </span>
                        <label for="options_183_2">
                            <span class="option-name">Product option 1</span>
                            <span class="option-sku">SKU1</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                    <li class="product-option">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" name="options[183]" id="options_182_2" value="590" price="0">
                        </span>
                        <label for="options_183_1">
                            <span class="option-name">Product option 2</span>
                            <span class="option-sku">SKU2</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
</tbody>
</table>

<table>
<tbody>
    <tr>
        <td class="image" rowspan="8">
            <div class="myedit" id="MyEdit"></div>
        </td>
        <td class="order" colspan="2">Text</td>
    </tr>
    <tr>
        <td>
            <div class="input-box">
                <ul id="options-181-list" class="options-list">
                    <li class="product-option active">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" checked="" name="options[181]" id="options_181_2" value="578" price="0">
                        </span>
                        <label for="options_181_2">
                            <span class="option-name">Product option 1</span>
                            <span class="option-sku">SKU1</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                    <li class="product-option">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" name="options[181]" id="options_181_2" value="579" price="0">
                        </span>
                        <label for="options_181_1">
                            <span class="option-name">Product option 2</span>
                            <span class="option-sku">SKU2</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
</tbody>
</table>

<script type="text/javascript">     
    $(document).ready(function () {
        $('input').click(function () {
            var sku = $('input:checked').closest('.product-option').find('.option-sku').html();
            document.getElementById("MyEdit").innerHTML = sku
        });
        var sku = $('input:checked').closest('.product-option').find('.option-sku').html();
            document.getElementById("MyEdit").innerHTML = sku
    });
</script>

Answer 1

答案是，您不是按班级搜索。您正在按ID搜索。您应该使用document.querySelector（'。myedit'）来获取所有myedit元素。要设置innerHTML，您将需要遍历所有结果并为每个结果设置内容。像这样：

for (var result in document.querySelectorAll('.myedit'))
{
result.innerHTML = sku;
}

祝你好运！：）

Answer 2

ID必须是唯一的。您可以尝试document.getElementsByClass()。这将为您提供该类的元素列表。

Answer 3

您只能将ID分配给1个元素。您需要的是按班级找到它们。 document.querySelectorAll('.myedit')是您需要的。 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

注意：这将返回多个元素，因此您必须遍历它们

更新：我没有注意到您正在使用jQuery，因为最简单的选择是：

$('.myedit').each(function(){
    $(this).html(sku)
})

Javascript document.getElementById在页面上多次

3 个答案: