Определение функции клика на основе имени Dynami c - PullRequest
Новая
       1

Определение функции клика на основе имени Dynami c

0 голосов
/ 09 февраля 2020

Я новичок в jquery. Я пытаюсь определить динамическую c функцию, которая выполняет действие на основе увеличенного идентификатора кнопки.

Код, который я написал, выглядит следующим образом: 

<script>
    var count = 1;

    function incrementCount(){
       count++;
    }

    $( "#submit_" + count.toString() ).click(function() {

        // Perform some actions before incrementing count
        // EDIT: 10-02-2020**
        $("button[id$='_" + (count).toString() + "']").fadeOut( "slow" );

        incrementCount();

        // Perform some actions after incrementing count
        // EDIT: 10-02-2020**
        $("div[id$='_" + count.toString() + "']").fadeIn( "slow" );
        $("button[id$='_" + count.toString() + "']").fadeIn( "slow" );

    }
)
</script>

My html так как несколько тегов submit помечены как id = "submit_1", "submit_2", "submit_3", ...

К сожалению, вышеприведенное работает только с "submit_1". Есть ли способ достичь вышеупомянутого без необходимости явного определения:

  1. $ ("# submit_1") .click (function () {
  2. $ ("# submit_2") .click (function () {...

РЕДАКТИРОВАТЬ: 12/02/2020 на основе комментария @VLAZ 

<script>
    var count = 1;

    function incrementCount(){
       count++;
    }

    $( "butt_sub" ).click(function() {

        $("button[id$='_" + (count).toString() + "']").fadeOut( "slow" );

        incrementCount();

        $("div[id$='_" + count.toString() + "']").fadeIn( "slow" );
        $("button[id$='_" + count.toString() + "']").fadeIn( "slow" );

    }
)
</script>

с моим html тег выглядит так: 

<button id="submit_{{ forloop.counter }}" class="butt_sub" data-count="{{ forloop.counter }}" style="display: block;"/>Submission</button>

Ответы [ 2 ]

0 голосов
/ 09 февраля 2020 
var count = 1;

$('input').click(function() {
  count++
})

Если цель состоит в том, чтобы просто увеличить счет, приведенный выше код должен работать.

Или, если вы хотите сохранить функцию, 

$('input').click(incrementCount)

Во втором Например, вы можете передать ссылку на вашу функцию приращения, которая будет делать то же самое. Проблема в том, что ваш селектор никогда не увеличивается, поэтому по сути вы выбираете только #submit_1

0 голосов
/ 09 февраля 2020

Используйте свойство данных в элементе триггера, например <div id="submit_1" class="classname" data-count="1">. Значение в data-count должно быть значением Dynami c в вашей кнопке / элементе отправки.

Затем получите к нему доступ: 

< script type = "text/javascript" >
  $(".classname").on('click', function() {
    var count = $(this).data('count');
    console.log(count);
    //$("#submit_"+count).whatever you wanna do here
  }); <
/script >
<!DOCTYPE html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id="submit_1" class="classname" data-count="1">Submit1</div>
  <div id="submit_2" class="classname" data-count="2">Submit2</div>
  <div id="submit_3" class="classname" data-count="3">Submit3</div>


</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...