1

これらの値をヘッドのjavascript関数に渡す必要があります。問題は、DBからプルするときに複数の単語があり、hrefを使用すると、javascript:function(vars)を使用して渡すときにスペースで切り捨てられ、onclickをまったく機能させることができないことです。変数( ""、''、/ "、および{)を引用符と角かっこで囲んだり、渡す前に複数の単語が含まれることがわかっているものを引用符で囲んだりしてみました(以下を参照)。 。PHPは次のとおりです。

<?php
    require('config/dbconfig.php');
    $query = "SELECT * FROM news ORDER BY id DESC LIMIT 4";
    if ($stmt = $mysqli->prepare($query)) {
        /* execute statement */
        $stmt->execute();

        /* bind result variables */
        $stmt->bind_result($idn, $titlen, $categoryn, $descn, $postdaten, $authorn);

        /* fetch values */
        while ($stmt->fetch()) {
            //echo 'id: '. $id .' title: '. $title;
            echo "<table border='0'>";
            $shortDescLengthn = strlen($descn);
            if ($shortDescLengthn > 106) {
                $sDCutn = 106 - $shortDescLengthn;
                $shortDescn = substr($descn, 0, $sDCutn);
            } else {
                $shortDescn = $descn;
            }
                        $titlenQuote = "'". $titlen ."'";
                        $descnQuote = "'". $descn ."'";
                        $authornQuote = "'". $authorn ."'";
            echo "
                <h1>". $titlen ."</h1>
                <tr><td>". $shortDescn ."...</td></tr>
                <tr><td><a href='javascript:return false;' onclick='readMore(". $idn .",". $titlenQuote .",". $categoryn .",
                            ". $descnQuote .",". $postdaten .",". $authornQuote .")'>Read More</a></td></tr>
                <tr><td>Written by: " . $authorn . "</td></tr>
                <tr><td><img src='images/hardcore-games-newsbar-border.png' width='470px' /></td></tr>
            ";
        }
        echo "</table><br />";

        /* close statement */
        $stmt->close();
    }

    /* close connection */
    $mysqli->close();
?>

そして、それが頭の中で行う機能:

<script type="text/javascript">
    function readMore(id,title,cat,desc,post,auth) {
        alert(id +","+ title +","+ cat +","+ desc +","+ post +","+ auth);
        var $dialog = $('<div></div>').html('This dialog will show every time!').dialog({autoOpen: false,title: 'Basic Dialog'});
        $dialog.dialog('open');
        $dialog.title = title;
        $dialog.html(desc);
    }
</script>

これは、メインのインデックスページでload()を使用しているページです。私もダイアログに問題がありましたが、まだそのポイントに到達していないので、それが次のステップです。知る必要がある場合は、すべてのjqueryインクルードがメインのインデックスページにあります。load()はインデックスページのdivに入り、これは今のところうまく機能しています。

4

3 に答える 3

3

あなたは現在このようなことをしています:

echo "<a href='#' onclick='doSomething('" . $someData . "');'>...";

ご指摘のとおり、引用符が競合するため、これは機能しません。これを修正する簡単な方法がありますが、もう少し変更した方がよいと思います。

まず、データを属性に配置することから始めます。

echo "<a ... data-title=\"" . htmlspecialchars($title) . "\" ...>...";

titleそこに入れる前に、私がどのように逃げているかに注意してください。そのような属性をさらに追加することもできますが、それらはすべて。で始まるようにする必要がありますdata-

次に、それに適用classします。たとえば、read-more

echo "<a ... class=\"read-more\" data-title=\"" . htmlspecialchars($title) . "\" ...>...";

これで、イベントリスナーをバインドできます。すべてのアイテムがので含まれているdivとしましょiditems。次に、JavaScriptでこれを行うことができます。

$("#items").on("click", ".read-more", function(e) {
    var me = $(this);
    var title = me.attr('data-title');
    alert("The title is:\n" + title);
    e.preventDefault();
});

次に、それを拡張して、ダイアログまたは必要な操作をポップアップ表示できます。


なぜこの方法であり、「簡単な」方法ではないのですか?

この方法は、コンテンツ、プレゼンテーション、および動作を分離するための開始点であり、これは一般的に良いことと考えられています。以前は、table動作のためにインラインJavaScriptと混合されたコンテンツと混合されたレイアウトとプレゼンテーション用のsがありました。ものの大きなスープ。

これをすべて分離すると、保守性が向上し、一般的なものが別々のファイルに入れられてブラウザによってキャッシュされる場合、多くの場合、読み込み時間が短縮されます。それがすべて大きなスープである場合、ブラウザはそれらを個別にキャッシュすることはできません。

于 2012-07-29T23:24:45.107 に答える
2

属性値の区切り文字とJavaScript文字列の区切り文字の両方に同じタイプの引用符を使用しています。そうしないでください。また、json_encode次のように、値を引用符で囲むのではなく、次のようにします。

echo "
    <h1>". $titlen ."</h1>
    <tr><td>". $shortDescn ."...</td></tr>
    <tr><td><a href='javascript:return false;' onclick='readMore(". $idn .",". json_encode($titlen) .",". json_encode($categoryn) .",
    ". json_encode($descn) .",". json_encode($postdaten) .",". json_encode($authorn) .")'>Read More</a></td></tr>
    <tr><td>Written by: " . $authorn . "</td></tr>
    <tr><td><img src='images/hardcore-games-newsbar-border.png' width='470px' /></td></tr>
";

…そして、それらをHTMLエンコードすることもできます。

echo "<h1>$titlen</h1>";
echo "<tr><td>$shortDescn...</td></tr>";
echo '<tr><td><a href="javascript:return false;" onclick="'
    . 'readMore(' . $idn . ',' . htmlspecialchars(json_encode($titlen)) . ','
    . htmlspecialchars(json_encode($categoryn)) . ','
    . htmlspecialchars(json_encode($descn)) . ',' . htmlspecialchars(json_encode($postdaten)) . ','
    . htmlspecialchars(json_encode($authorn)) . ')">Read More</a></td></tr>';
echo "<tr><td>Written by: $authorn</td></tr>";
echo '<tr><td><img src="images/hardcore-games-newsbar-border.png" width="470px" /></td></tr>';

ProTip™:<tr>直後にすることはできません<h1>

于 2012-07-29T23:17:58.530 に答える
1
<html>
<head>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
function login(t) {
alert(t);
}
</SCRIPT>
</head>
<body>
<?php
$id=$_GET['id'];
print "<input type='button' name='button' value='button' onClick=login('$id')>";
?>
</body>
</html>
于 2015-01-27T06:26:19.473 に答える