Question

我的代码

while ($row = $result->fetch_assoc()) {
        $id = $row['id'];
       ?>
        <script>
        $(document).ready(function(){
            $("#btn<?echo $id?>").click(function(){
                $("#inp<?echo $id?>").hide();
            });
        });
        </script>
        <?
           echo "<button id='btn$id' class='label label-info'>Dodaj odpowiedź</button>";?>
                    <div class="odpowiedz"><input id="inp<?echo $id;?>"></div>

我的问题是当我点击按钮功能时什么都不做

生成后的@edit示例html代码

$(document).ready(function(){
            $("#btn274").click(function(){
                $("#inp274").hide();
            });
        });
<button id="btn274" class="label label-info">Dodaj odpowiedź</button>
<div class="odpowiedz"><input id="inp274"></div>

Answer 1

你可以在php之外使用它..在包含Jquery之后和</body>之前使用它

<script>
    $(document).ready(function(){
        $('body').on('click',"[id^='btn']",function(){
           var getId = $(this).attr('id').replace('btn', '');
           $("#inp"+getId).hide();
        });
    });
</script>

您可以使用concatenate in php

echo "<button id='btn".$id."' class='label label-info'>Dodaj odpowiedź</button>
      <div class='odpowiedz'><input id='inp".$id."'></div>";

Answer 2

如果你想在点击按钮简单JS上隐藏按钮输入

<强>更新

＆＃13;

function callMe(obj) {
  obj.style.display = "none";
}

＆＃13;

<input id="sds" />
<button id="sds1" onclick="callMe(sds)">Submit10</button>

＆＃13;

Answer 3

从你的循环中删除javascript，更好的是，把它放在一些javascript文件中

while ($row = $result->fetch_assoc()) {
    $id = $row['id']; ?>


    <button id='btn<?=$id?>' class='label label-info'>Dodaj odpowiedź</button>
    <div class="odpowiedz"><input id="inp<?=$id?>"></div>

<? } ?>

做Mohamed-Yousef所说的话：

＆＃13;

$(document).ready(function(){
  $('body').on('click',"[id^='btn']",function(){
    var getId = $(this).attr('id').replace('btn', '');
    $("#inp"+getId).hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <button id='btnapple' class='label label-info'>Dodaj odpowiedź</button>
    <div class="odpowiedz"><input id="inpapple"></div>

    
    <button id='btnbanana' class='label label-info'>Dodaj odpowiedź</button>
    <div class="odpowiedz"><input id="inpbanana"></div>

    
    <button id='btnorange' class='label label-info'>Dodaj odpowiedź</button>
    <div class="odpowiedz"><input id="inporange"></div>

＆＃13;

Answer 4

简单地回答这个问题，你的具体例子不起作用的原因是脚本出现在它要影响的元素之前。

将<script></script><button></button><input />变为<button></button><input /><script></script>

话虽如此，尝试将其移除到外部JS文件，并添加更通用的方法，如此处的其他答案中所建议的。 @Endless有一个很好的解决方案。

Answer 5

如果您需要多次向页面输出相同的代码，那么总会有更好的方法。如果要使用jquery，请使用数据属性和类：

while ($row = $result->fetch_assoc()) {
    $id = $row['id'];
        echo "<button id='btn$id' class='label label-info toggle' data toggle="inp$id">Dodaj odpowiedź</button>";?>
       <div class="odpowiedz"><input id="inp<?echo $id;?>"></div>
}

然后你的javascript是：

$(function(){
    $('toggle').click(function(){
        var id = $(this).data('toggle');
        $('#' + id).hide();
    });
});

许多按钮，许多输入，1个javascript函数来统治它们。

单击按钮后隐藏输入

5 个答案: