Question

我想在按钮处于活动状态时向其添加图标，并且每次单击其他项目时它都可以更改。

当我想要更改活动按钮时，它并没有改变，我必须刷新页面才能解决它。

<div id="a" class="pipeline-modal-content">
    <button>
        <span>name 1</span>
    </button>
    <span id="b"></span>
</div>
<div id="a" class="pipeline-modal-content">
    <button>
        <span>name 2</span>
    </button>
    <span id="b"></span>
</div>

var a = $("#a");
var b = $("#b");
a.click(function () {
    $('#b').html('&#10004;');
});
$('#b').on('click', function () {
    $(this).closest("#b").remove();
});

Answer 1

您可以使用以下代码段。如果您更喜欢使用JQuery，只需替换

document.getElementById('button1')由$("#button1")

button1.addEventListener('click', by button1.on('click',;

button1.innerHTML = ''由button1.html('')

var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var check1 = document.getElementById('check1');
var check2 = document.getElementById('check2');

button1.addEventListener('click', function(event) {
    if (check1.innerHTML) {
        check1.innerHTML = '';
        return;
    }
    check1.innerHTML = '✓';
    check2.innerHTML = '';
});

button2.addEventListener('click', function(event) {
    if (check2.innerHTML) {
        check2.innerHTML = '';
        return;
    }
    check1.innerHTML = '';
    check2.innerHTML = '✓';
});

<div class="pipeline-modal-content">
    <button id="button1">
        <span>name 1</span>
    </button>
    <span id="check1"></span>
</div>
<div id="a" class="pipeline-modal-content">
    <button id="button2">
        <span>name 2</span>
    </button>
    <span id="check2"></span>
</div>

Answer 2

更新了@vladislav问题，所以它在本机js中：

var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var check1 = document.getElementById('check1');
var check2 = document.getElementById('check2');

button1.addEventListener('click', function(event) {
    // check if already has ✓ letter
    if ( check1.innerHTML === '✓' ) {
       check1.innerHTML = '';
       return;
    }         
      check1.innerHTML = '✓';
      check2.innerHTML = '';
    
});

button2.addEventListener('click', function(event) {
    // check if already has ✓ letter
    if ( check2.innerHTML === '✓' ) {
       check2.innerHTML = '';
       return;
    }
    
    check1.innerHTML = '';
    check2.innerHTML = '✓';
});

<div class="pipeline-modal-content">
    <button id="button1">
        <span>name 1</span>
    </button>
    <span id="check1"></span>
</div>
<div id="a" class="pipeline-modal-content">
    <button id="button2">
        <span>name 2</span>
    </button>
    <span id="check2"></span>
</div>

还有jQuery的答案，因为您的问题中带有jquery标记：

$('#button1').on('click', function(){

    if( $('#check1').html() == '✔' ){
        $('#check1').html('');
        return;
    }
    
    $('#check1').html('✔');
    $('#check2').html('');
});

$('#button2').on('click', function(){

    if( $('#check2').html() == '✔' ){
        $('#check2').html('');
        return;
    }
    
    $('#check2').html('✔');
    $('#check1').html('');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pipeline-modal-content">
    <button id="button1">
        <span>name 1</span>
    </button>
    <span id="check1"></span>
</div>
<div id="a" class="pipeline-modal-content">
    <button id="button2">
        <span>name 2</span>
    </button>
    <span id="check2"></span>
</div>

单击删除图标

2 个答案: