php - $(document).ready(function(){ 每次在 Hyperlink 的 onclick 事件上执行？

Question

在我的代码中，我正在使用PHP动态创建产品列表（参见图片），并且现在在document.ready()labels and image paths方法上将当前的响应存储到隐藏字段（created dynamically使用 PHP）中，我将第一个列表项及其备注设置为使用第一个隐藏备注和图像路径字段。imagepath to img's srclabel remarks

并在 listitem 单击我想更改它我的函数将这些值正确设置为 img 和标签（使用警报检查）但是当函数结束时它将图像 src 和备注内文设置为在 document.ready() 方法上设置的默认值

现在我的问题是我可以阻止下一次在 javascript 函数调用上执行 document.ready()

我的视图： 由于图像被重新加载，因此页面渲染再次完成，因此再次调用 document.ready 并将这些值再次设置为默认值。

笔记：

我的页面不会在任何时候重新加载，只有图像和标签正在更改

图片中显示的列表只是一组，其他组也是动态创建的。

带有备注和图片的产品列表

PHP中的服务器端代码

<?php 
for($j=0;$j<count($productstr);$j++) { 
$valuerem = $productstr[$j]["pcode"];
$idrem  = "rem".$j.$grp;
$valueimg =$productstr[$j]["imgpath"];
$idimg = "img".$j.$grp;
echo "<input type='hidden' value='$valuerem' id='$idrem' />" ;
echo "<input type='hidden' value='$valueimg' id='$idimg' />" ;
}?>
<script>   
   $(document).ready(function() {
    idrv < ? PHP echo $grp; ? > = 'rem0<?PHP echo $grp; ?>';
    idmv < ? PHP echo $grp; ? > = 'img0<?PHP echo $grp; ?>';
    $('#txt<?PHP echo $grp; ?>').text(document.getElementById(idrv < ? PHP echo $grp; ? ).value);
    alert($('#txt<?PHP echo $grp; ?>').text());
    $('#img<?PHP echo $grp; ?>').attr('src', document.getElementById(idmv < ? PHP echo $grp; ? > ).value);
    alert($('#img<?PHP echo $grp; ?>').attr('src'));
  });

  function Change(id) {
    idrv < ? PHP echo $grp; ? > = 'rem' + id;
    idmv < ? PHP echo $grp; ? > = 'img' + id;
    $('#txt<?PHP echo $grp; ?>').text(document.getElementById(idrv < ? PHP echo $grp; ? > ).value);
    alert($('#txt<?PHP echo $grp; ?>').text());
    $('#img<?PHP echo $grp; ?>').attr('src', document.getElementById(idmv < ? PHP echo $grp; ? > ).value);
    alert($('#img<?PHP echo $grp; ?>').attr('src'));
    return true;
  }
</script>

警报仅用于测试值

在客户端浏览器上生成的代码

 <tr>
    <td width="220px" valign="top" align="left">
    <input id="YN" type="hidden" value="true">
    <input id="rem00" type="hidden" value="SPL FUNNEL 1">
    <input id="img00" type="hidden" value="adminpanel/product_images/4f8e530154d74155.jpg">
    <input id="rem10" type="hidden" value="SPL FUNNEL 2">
    <input id="img10" type="hidden" value="adminpanel/product_images/4f8e53daf13e6156.jpg">
    <input id="rem20" type="hidden" value="SPL FUNNEL 3">
    <input id="img20" type="hidden" value="adminpanel/product_images/4f8e543100eaf157.jpg">
    <input id="rem30" type="hidden" value="SPL FUNNEL 4">
    <input id="img30" type="hidden" value="adminpanel/product_images/4f8e545a829e1158.jpg">
    <script>
    $(document).ready(function() {
        idrv0 = 'rem00';
        idmv0 = 'img00';
        $('#txt0').text(document.getElementById(idrv0).value);
        alert($('#txt0').text());
        $('#img0').attr('src', document.getElementById(idmv0).value);
        alert($('#img0').attr('src'));
    });

    function Change(id) {
        $('#YN').val('false');
        idrv0 = 'rem' + id;
        idmv0 = 'img' + id;
        $('#txt0').text(document.getElementById(idrv0).value);
        alert($('#txt0').text());
        $('#img0').attr('src', document.getElementById(idmv0).value);
        alert($('#img0').attr('src'));
        return true;
    }
    </script>
    <ul>
    <li>
    <a id="00" style="text-decoration: none; text-size: 1.1em; color: " 
onclick=" Change(this.id); alert($('#txt0').text()); alert($('#img0').attr('src'));">
SPL FUNNEL 1</a>
    </li>
    <li>
    <li>
    <li>
    </ul>
    </td>
    <td valign="bottom" align="left" colspan="2">
    <td width="110px" valign="bottom" align="left" style="width: 180px">
    </tr>

score 5 · Accepted Answer

您需要在单击时停止重新加载，如下所示。

$('a.availableProducts').click(function(e){
   e.preventDefault();
   // your code
});

score 2 · Accepted Answer

猜测一下，每次单击锚点时，它都会执行新的页面加载。如果是这样，您可能需要将preventDefault添加到锚点onClick 方法中。

假设您的代码看起来像这样，请在适当的地方添加preventDefault()：

$('a.availableProducts').click(function(ev){
   ev.preventDefault();
   //do image stuff or whatever
});

score 1 · Accepted Answer

现在我的问题是我可以阻止下一次在 javascript 函数调用上执行 document.ready()

(document).ready()应该只用于检测页面加载。如果您加载 HTML 并将其附加到包含内部的 DOM（例如通过 ajax），它也会触发(document).ready()。

(document).ready()是您告诉 jQuery 的一种方式（在 DOM 加载且可编写脚本时执行此代码）。这样您就不需要将 javascript 放在 HTML 的末尾以确保所有内容都已加载（尽管这仍然是一个好习惯）。

score 0 · Accepted Answer

感谢其他人的支持，感谢他们的回答，但没有一个答案给我解决方案

一种不同的方法解决了我的问题

我的问题已经解决了

服务器端代码

<tr>
    <td width="220px" align="left" valign="top"><?php for($j=0;$j<count($productstr);$j++)
    {
        $valuerem = $productstr[$j]["remark"];
        $idrem  = "rem".$j.$grp;
        $valueimg =$productstr[$j]["imgpath"];
        $idimg = "img".$j.$grp;
        $valuepid = $productstr[$j]["pid"];
        $idpid ="pid".$j.$grp;
        $image = $productstr[0]["imgpath"];
        $remark = $productstr[0]["remark"];
        $pid = $productstr[0]["pid"];
        echo "<input type='hidden' value='$valuerem' id='$idrem' />" ;
        echo "<input type='hidden' value='$valueimg' id='$idimg' />" ;
        echo "<input type='hidden' value='$valuepid' id='$idpid' />" ;
    }
    ?> <script>
    txt = '#txt<?PHP echo $grp; ?>';
    img = '#img<?PHP echo $grp; ?>';
    alink = '#aimg<?PHP echo $grp; ?>';
    function Change<?PHP echo $grp; ?>(id){                                                                             
        idrv<?PHP echo $grp; ?> = 'rem'+id;
        idmv<?PHP echo $grp; ?> = 'img'+id;
        idpv<?PHP echo $grp; ?> = 'pid'+id;
        $('#txt<?PHP echo $grp; ?>').html(document.getElementById(idrv<?PHP echo $grp; ?>).value);
        $('#img<?PHP echo $grp; ?>').attr('src',document.getElementById(idmv<?PHP echo $grp; ?>).value);
        $('#aimg<?PHP echo $grp; ?>').attr('href',"view_large.php?mid="+document.getElementById(idpv<?PHP echo $grp; ?>).value);                                                                            
        return false;
        }   
    </script>
    <ul>
    <?php for($j=0;$j<count($productstr);$j++){
        $imgarray[ $productstr[$j]["imgpath"].'#'.$productstr[$j]["pid"]]  = $j+1;
        ?>
        <li><a id='<?PHP echo $j.$grp;?>'
            onclick="Change<?PHP echo $grp; ?>(this.id);"
            style="text-decoration: none; text-size: 1.3em; cursor: pointer;"
            title='Click to see'> <?php echo
            $productstr[$j]["pcode"]; ?> </a></li>
            <?php } $randomdata = array_rand($imgarray,1); $randompic = explode('#',$randomdata);
            ?>
    </ul>
    </td>
    <td align="left" valign="bottom" colspan="2"><label
        id="txt<?PHP
        echo $grp; ?>"><?PHP echo $remark; ?></label></td>
    <td width="110px" align="left" valign="bottom" style="width: 180px"><span
        class="color-4_inner p1" style="text-align: center;"> <a
        id="aimg<?PHP echo $grp; ?>"
        href="view_large.php?mid=<?PHP echo $pid; ?>"
        onclick="return hs.htmlExpand(this, { objectType: 'ajax'} )"> <img
        title='Click to view Full image!' id="img<?PHP echo $grp; ?>"
        src="<?PHP echo $image; ?>" border="0" width="102" height="110" /> </a>
    </span></td>
</tr>

php - $(document).ready(function(){ 每次在 Hyperlink 的 onclick 事件上执行？

4 回答 4

Related

Reference