как получить идентификатор элемента кнопки при нажатии и использовать его в пользовательском интерфейсе jquery

0 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {

    $(".dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 400
    },
    hide: {
        effect: "blind",
        duration: 400
    }
    });

    $( ".opener" ).on ('click',MyJQFunction);
});
function MyJQFunction() {
    $(".dialog").dialog( "open" );
}
</script>

 <?php

 $x = 0;
 while($x < 5){
 $x = $x+1;

 $did1 = 'dialog'.$x;
 $did2 = 'opener'.$x;
 ?>

 <div class = "dialog" id= <?php echo $did1; ?>  title=<?php echo $did1; ?>>
 <p> <?php echo $did1; ?> </p>
 </div>

 <button class= "opener" > <?php echo $did2; ?> Contact</button>

 <?php
 }//end of while loop
 ?>

Я в основном создаю таблицу, используя цикл while. Для каждой кнопки и <p> я назначаю определенный идентификатор. Теперь, я хочу захватить этот идентификатор, и когда кнопка нажата, покажите, что определенная <p>.

Однако, когда я нажимаю одну кнопку, все кнопки появляются одновременно.

Как я могу исправить эту проблему?

Теги:
loops
while-loop

3 ответа

1
Лучший ответ

Вы хотите получить диалог, который находится перед кнопкой, вы всегда можете ссылаться на кнопку внутри своего обработчика с this ключевым словом, а затем использовать prev для захвата диалогового div. Вам не обязательно нужен идентификатор по крайней мере со структурой, которую вы разместили.

Попробуйте так:

function MyJQFunction() {
    $(this).prev(".dialog").dialog( "open" );
    //to get the id of the dialog
     //$(this).prev(".dialog")[0].id;
}

Обновить

Это не сработает, так как диалог jquery создается до нажатия кнопки, и они помещаются в нижней части тела. Поэтому измените ваш php-код для создания кнопок:

т.е. Прикрепите атрибут target data-target для целевого диалога с конкретным идентификатором.

<button class= "opener" data-target="#<?php echo $did1; ?>"> <?php echo $did2; ?> Contact</button>

и измените свой сценарий на:

function MyJQFunction() {
    $($(this).data('target')).dialog( "open" );
}

Полный код:

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {

    $(".dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 400
    },
    hide: {
        effect: "blind",
        duration: 400
    }
    });

    $( ".opener" ).on ('click',MyJQFunction);
});
function MyJQFunction() {
    $($(this).data('target')).dialog( "open" );
}
</script>
</head>
<body>
 <?php

 $x = 0;
 while($x < 5){
 $x = $x+1;

 $did1 = 'dialog'.$x;
 $did2 = 'opener'.$x;
 ?>

 <div class = "dialog" id= <?php echo $did1; ?>  title=<?php echo $did1; ?>>
 <p> <?php echo $did1; ?> </p>
 </div>

 <button class= "opener" data-target="#<?php echo $did1; ?>"> <?php echo $did2; ?> Contact</button>

 <?php
 }//end of while loop
 ?>
</body>
</html>
Поделиться
  • 0
    По какой-то причине это, похоже, не решает мою проблему. Можно ли выслать вам мой код для просмотра? Я был бы очень признателен.
  • 0
    @ user2840665 Пожалуйста, оставьте свой код в самом вопросе, если не я, то кто-то определенно поможет вам.
Показать ещё 8 комментариев
0

Вы должны использовать атрибут data так

<button class= "opener" data-dialog="<?php echo $did2; ?>"><?php echo $did2; ?> Contact</button>

function MyJQFunction() {
    var dialog = $(this).attr('data-dialog');
    $(dialog).dialog("open");
}
Поделиться
0

Чтобы получить идентификатор, вы можете использовать.attr('id') или.attr('class'), если хотите получить класс объекта.

Пример:

<button id='12345'>12345</button>


$('button').on('click',function() {
  var id = $(this).attr('id');
  alert(id);
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню