Question

当在不可更改的html元素id标记上使用attr（'id'）时，我的代码适用于id不含连字符的所有实例，但是当id包含连字符时会中断。

$('.coloursContainer .radio-box').live('click', function(){

    if ($(this).hasClass('selected')){

    } else {
        var radioID = $(this).attr('id');
        $(this).parent().find('.radio-box').removeClass('selected');
        document.getElementById(radioID).classList.add('selected');
    }
});

<div class="coloursContainer">
    <div class="radio-box" id="Natural Wave Structure" data-category="trim-colour" data-price="0">
        <span class="selectedSign">SELECTED</span>
        <span class="imgBox" style="background-image:url('/img/colours/804.jpg')"></span>
        <h3>Natural Wave Structure</h3>
        <p>+ £0</p>
    </div>
    <div class="radio-box" id="Semi-solid Oak" data-category="trim-colour" data-price="0">
        <span class="selectedSign">SELECTED</span>
        <span class="imgBox" style="background-image:url('/img/colours/203.jpg')"></span>
        <h3>Semi-solid Oak</h3>
        <p>+ £0</p>
    </div>
</div>

第一个单选框添加了“ selected”类，但是第二个单选框的ID为“ Semi-solid Oak”。

Answer 1

我认为这是您使用的jquery版本的问题，我认为可以使用.on代替.live.来解决此问题，请查看jquery文档http://api.jquery.com/live/[Check jquery文档] [1]

Answer 2

HTML id属性不能包含空格。您的HTML无效，导致JavaScript找不到您的ID。

请注意，您正在使用旧的live函数，并且正在将jQuery与原始JavaScript混合使用。

Answer 3

$('.coloursContainer .radio-box').on('click', function(){

    if ($(this).hasClass('selected')){

    } else {
        var radioID = $(this).attr('id');
        $(this).parent().find('.radio-box').removeClass('selected');
       // document.getElementById(radioID).classList.add('selected');
       $("[id='"+radioID+"']").addClass( "selected" );

    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="coloursContainer">
<div class="radio-box" id="Natural Wave Structure" data-category="trim-colour" data-price="0">
<span class="selectedSign">SELECTED</span>
<span class="imgBox" style="background-image:url('/img/colours/804.jpg')"></span>
<h3>Natural Wave Structure</h3>
<p>+ £0</p>
</div>
<div class="radio-box" id="Semi-solid Oak" data-category="trim-colour" data-price="0">
<span class="selectedSign">SELECTED</span>
<span class="imgBox" style="background-image:url('/img/colours/203.jpg')"></span>
<h3>Semi-solid Oak</h3>
<p>+ £0</p>
</div>
</div>

我已经修改了您的代码。

用连字符吸引ID时，GetElementById不起作用

3 个答案: