2

私のコードでは、PHPを使用して動的に製品リストを作成しており（画像を参照）、対応するものは非表示のフィールドlabels and image pathsに保存されます（PHPを使用）。document.ready （）メソッドで最初のリストアイテムとその注釈を最初の非表示を使用するように設定しますremarkとimagepathのフィールド。created dynamicallyimagepath to img's srclabel remarks

そしてlistitemをクリックして変更したい関数はこれらの値をimgに設定し、正しくラベル付けします（アラートを使用してチェック）が、関数が終了すると、image srcを設定し、innertextをdocument.ready（）メソッドで設定されたデフォルトにコメントします

今私の質問は、javascript関数呼び出しで次回document.ready（）が実行されるのを防ぐことができますか？

マイビュー： 画像がリロードされると、ページレンダリングが再度実行されるため、document.readyが再度呼び出され、これらの値がデフォルトに再度設定されます。

ノート ：

画像とラベルのみが変更されているときはいつでも私のページはリロードされません

画像に表示されているリストは1つのグループであり、他のグループも動的に作成されます。

備考と画像付きの製品リスト

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>
4

4 に答える 4

5

以下のようにクリックするとリロードを停止する必要があります。

$('a.availableProducts').click(function(e){
   e.preventDefault();
   // your code
});
于 2012-05-31T06:31:42.727 に答える
2

アンカーをクリックするたびに、新しいページが読み込まれると推測します。その場合、アンカーのonClickメソッドにpreventDefaultを追加する必要があります。

コードが次のようになっていると仮定して、必要に応じてpreventDefault（）を追加します。

$('a.availableProducts').click(function(ev){
   ev.preventDefault();
   //do image stuff or whatever
});
于 2012-05-31T06:24:21.563 に答える
1

今私の質問は、javascript関数呼び出しで次回document.ready（）が実行されるのを防ぐことができますか？

は(document).ready()、ページの読み込みを検出するためにのみ使用する必要があります。(document).ready()また、内部を含むDOMにHTMLをロードして（たとえばajaxを介して）追加した場合にも起動します。

(document).ready()これは、jQueryに指示する方法です（DOMがロードされ、スクリプト可能であるときにこのコードを実行します）。このように、すべてがすでにロードされていることを確認するために、HTMLの最後にjavascriptを置く必要はありません（それでも良い習慣ですが）。

于 2012-05-31T06:31:18.167 に答える
0

他の人のサポートと彼らの答えに感謝しますが、答えのどれも私に解決策を与えませんでした

別のアプローチで問題が解決しました

私の問題はこれを行うことで解決されました

サーバーサイドコード

<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>
于 2012-06-01T04:46:12.873 に答える