Удалить значок при клике

Question

Удалить значок при клике

:nth-of-type используется для выбора родного брата определенного типа. По типу I подразумевается тип тега, как в

, ,

и т. Д.

:nth-child используется для выбора дочерних элементов определенного родительского тега независимо от типа

Пример :nth-of-type

HMTL:

  
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 12
    Item 13
    Item 14
    Item 15
    Item 16

CSS:

Обратите внимание, что между тегом

нет пробела и псевдокласса nth-of-type.

li:nth-of-type(odd) { background-color: #ccc; }

Результат: https://jsfiddle.net/79t7y24x/

Пример :nth-child

HTML:

  
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 12
    Item 13
    Item 14
    Item 15
    Item 16

CSS:

Обратите внимание, что существует пробел между тегом

:nth-child

ul :nth-child(even) { background-color: red }

Результат: https://jsfiddle.net/o3v63uo7/

-1

javascript jquery html css

задан Jason Aller 24 February 2019 в 20:06

2 ответа

Другие вопросы по тегам:

javascript jquery html css

Похожие вопросы:

score 0 · Answer 1

обновил вопрос @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>

, а также [114 ] ответ, потому что у вас есть 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>

score 0 · Answer 2

Вы можете использовать следующий фрагмент. Если вы предпочитаете использовать JQuery, просто замените

document.getElementById('button1') на $("#button1")

button1.addEventListener('click', на button1.on('click',;

button1.innerHTML = '' на button1.html('') [1113 ]

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>