Question

我在php中有一个foreach循环，如下所示。

<?php
    $i = 0;
    foreach ($query as $value) { ?>
    <button id="show[<?php echo $i;?>]" class="btn btn-success" type="button">View</button>
    <div id="blah[<?php echo $i;?>]">Joel</div>
<?php 
    $i++ 
 } ?>

现在这个循环工作正常，我为每个具有唯一ID的按钮和div获取id。但我想添加一个jquery点击功能，如下所示。

$("#show").click(function(){
$("blah").hide();
});

但是因为它在一个循环中并且与它们有不同的id如何为每个按钮添加这个jquery函数？

Answer 1

$(".btn").click(function(){
 var id = $(this).attr('id');
 var n = id.replace("show",'');
 $("#blah"+n).hide();
});

同样用此代码替换您的按钮

<button id="show-<?php echo $i;?>" class="btn btn-success" type="button">Clear</button>
<div id="blah-<?php echo $i;?>">Joel</div>

Answer 2

for php：

<?php foreach ($query as $key => $value) {?>
<button class="btn btn-success blah-toggler" type="button" data-target="blah-<?php echo $key ?>">
<div id="blah-<?php echo $key ?>">Joel</div>
<?php }?>

然后在jquery中：

$(".blah-toggler").on("click", function(){
    var t = $(this);
    $('#' + t.data('target')).hide();
});

Answer 3

你应该使用以下

PHP：

<?php
    $i = 0;
    foreach ($query as $value) { ?>
    <button id="show[<?php echo $i;?>]" class="btn btn-success clickEvent" type="button">
    <div id="blah[<?php echo $i;?>]">Joel</div>
<?php 
    $i++ 
 } ?>

这里你要添加class =＆＃34; clickEvent＆＃34;按钮。最后，你将拥有包含以下内容的jScript文件。当点击该类的按钮时，它会注意应该发生的事情。

jQuery的：

$(".clickEvent").click(function(){
$(this).next('div').hide();
});

Answer 4

使用课程

<button id="show[<?php echo $i;?>]" class="btn btn-success mybutton" type="button">

然后

$(".mybutton").click(function(){
    $("blah").hide();
});

Answer 5

或者您也可以使用课程。通常是：

<?php $i = 0; ?>
<?php foreach ($query as $value): ?>
    <button class="btn btn-success toggle" type="button">
        <div id="blah[<?php echo $i;?>]">Joel</div>
    </button> <!-- missed a closing button tag -->
<?php $i++; ?>
<?php endforeach; ?>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('.toggle').on('click', function(){
        $(this).children('div').hide();
    });

});
</script>

Answer 6

PHP：

<?php
$i = 0;
foreach ($query as $value) { ?>
<button id="show_<?php echo $i;?>" onclick=show(this.id) class="btn btn-success" type="button">
<div id="blah_<?php echo $i;?>">Joel</div>
<?php 
$i++ 
} ?>

的javascript：

function show(id)
{
var arr = id.split('_');
$("#blah_"+arr[1]).hide("slow");
}

jquery在php循环中单击函数

6 个答案: