单击按钮即可显示多个ID

时间:2016-09-28 08:21:59

标签: javascript php jquery html5

HTML + PHP

<?php
  for($i=0;$i<5;$i++){
?>

<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">

<span>
    val<?php echo $i; ?>
</span>

<button class="btn btn-primary" id="copyButton<?php echo $i; ?>"  onClick="reply_click(this.id, $('.copyTarget').attr('id'));">Copy</button>


<?php
  }
?>

JS

<script>
    function reply_click(clicked_id, target_id) {
        alert(clicked_id);
        alert(target_id);
    }
</script>

我想要什么

我希望按循环周期获取copyTarget和copyButton的两个值。这意味着

如果当前值为$i = 3

然后我想要警报值,例如,

clicked_id = copyTarget3
target_id = copyButton3

我目前得到的是

如果是当前值 $i = 3

然后我想要警报值,例如,

clicked_id = copyTarget0
target_id = copyButton3

它最初存储的ID(copyTarget)的第一个值。我想要当前的循环周期值。

任何帮助都可以

由于

3 个答案:

答案 0 :(得分:2)

为什么在处理程序中使用JS?

尝试:

onClick="reply_click('copyButton<?php echo $i; ?>', 'copyTarget<?php echo $i; ?>')"

另外你应该在php变量中存储id名称(copyButtoncopyTarget),这样你就可以在一个地方更改它们。

答案 1 :(得分:1)

您可以尝试下面的内容。但是,我会选择Maxx的答案。这实际上取决于你打算用其他代码做什么等。

<?php
  for($i=0;$i<5;$i++){
?>

<div>
    <input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
    <span>
      val<?php echo $i; ?>
    </span>

    <button class="btn btn-primary" id="copyButton<?php echo $i; ?>"  onClick="reply_click(this)">Copy</button> 
</div>

<?php
  }
?>

<script>
function reply_click(btn) {
    var clicked_id = $(btn).attr('id');
    var target_id=$(btn).parent().find('span').html();

    alert(clicked_id);
    alert(target_id);
}
</script>

答案 2 :(得分:0)

试一下

<?php
 for($i=0;$i<5;$i++){
 ?>

 <input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">

 <span>
   val<?php echo $i; ?>
 </span>

 <button class="btn btn-primary" id="copyButton<?php echo $i; ?>"   onClick="reply_click(this.id);">Copy</button>


<?php
 }
?>

<强> JS

<script>
function reply_click(clicked_id) {
    alert(clicked_id); //clicked id
    alert(clicked_id.split('copyButton').join('copyTarget')); // target id
}
</script>