Как получить идентификатор элемента, идентификатор которого был задан динамически?

Question

Я пытаюсь сделать простое шоу, когда установлен флажок, вид секции, но я не могу удержать элемент, потому что идентификаторы элемента динамически назначаются PHP.

Элемент будетнаходиться в цикле foreach, чтобы его было несколько экземпляров с динамически заданными идентификаторами.

пример:

//Laravel blade template
<element id="attrb{{ $elem->id }}> "></element>

//Javascript
if ($("#attrb*ID").is(":checked")) {
    $("#attrbs-container").show();
} else {
    $("#attrbs-container").hide();
}

Answer 1

вы можете создать функцию с обратным вызовом, если вы присваиваете идентификатор с помощью javascript (после запроса ajax)

function addID(add, callback)

Затем используйте функцию:

addId(function(){
    //dynamically add ID
}, function(){
    // callback function
    if ($(“#attrb*ID”).is(":checked")) {
        $(“#attrbs-container").show();
    } else {
        $(“#attrbs-container").hide();
    }
})

Answer 2

С Jquery

$('input[id^="attrb"]').change(function(e){
     
    if($(this).is(':checked'))  console.log($(this).prop('id'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="checkbox" id="attrb1" value="1" />

Запустите и установите флажок.Вы можете заменить console.log своим .show или любым другим.

Селектор input[id^="attrb"] означает input с id, который ^= начинается с attrb.Вы также можете использовать input[type="checkbox"], если это единственные чекбоксы, которые у вас есть, но они менее конкретны.

Изменить против клика

change срабатывает, когда данные (состояние) элемента изменяется.click сработает при каждом нажатии.В этом случае это, вероятно, не имеет большого значения, какой вы используете.Лучший пример change против click - использование переключателей и нажатие на уже отмеченное радио.Флажки снимаются, когда отмечены, переключателей не так много.Я просто привык использовать change over click для изменения состояния.

$('input[id^="attrb"]').click(function(e){
     
    if($(this).is(':checked'))  console.log($(this).prop('id'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="radio" id="attrb1" value="1" />

Запустите и нажмите радио 2 раза.Срабатывает 2 раза.

$('input[id^="attrb"]').change(function(e){
     
    if($(this).is(':checked'))  console.log($(this).prop('id'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="radio" id="attrb1" value="1" />

Сделайте то же самое здесь, но с изменением.В этом разница.

DYNAMIC vs Dynamic

Я имею в виду, что DYNAMIC - это то, что изменяется во время выполнения на клиенте, Dynamic - статический HTMLгде идентификатор меняется только на стороне сервера.Для DYNAMIC вы хотите использовать on вот так

 $(someparent).on('change', 'input[id^="attrb"]', function(e){ ... });

Где someparent - статический элемент, который не изменяется во время выполнения.При этом будут использоваться делегирование событий и «всплывающее сообщение» для поиска содержимого, которое было изменено на стороне клиента.

Не думаю, что вы имели в виду DYNAMIC, но я включил его на всякий случай.

Cheers!