Question

使用JQuery如何使用

$("button").click(function(event){

填写论坛变量。

我想要一个按钮，如果用户点击它将确定评论的去向。这样我就可以使用Image_ID将每个评论链接到单独的图像。我想这样做，以便用户不必输入下面论坛当前所需的Image_ID号码。

  <input type="text" name="Image_ID" message="Please enter Account Here." 
                                 validateat="onSubmit" required="yes" id="Image_ID" size="10"
                                 maxlength="60">
                        </input>

以上是手动输入的部分，我需要自动化。

        <cfform name="InsertComments" id="InsertComments">
            <fieldset>
<div id="container">
    <div id="mainContent">


            <textarea name="Remarks" cols="55" rows="4" label="Tour Description"
                                    required="yes" validateat="OnSubmit" message="Please enter your comment here" 
                                    enabled="no">
                        </textarea>
            <input type="text" name="Image_ID" message="Please enter Account Here." 
                                 validateat="onSubmit" required="yes" id="Image_ID" size="10"
                                 maxlength="60">
                        </input>
        <input type="submit" name="insertComments" value="Insert Comments" id="submit">
                        </input>
        </div>
    </div>  
    </fieldset>
    </cfform>
        <cfif IsDefined("form.InsertComments")>

                    <cfquery datasource="AccessTest">
                        INSERT INTO CommentsDB (Remarks, Image_ID, Date_Time )
                        VALUES
                        (<cfqueryparam value="#form.Remarks#" cfsqltype="CF_SQL_LONGVARCHAR">

                        , <cfqueryparam value="#form.Image_ID#" cfsqltype="cf_sql_integer">

                        , <cfqueryparam value="#now()#" cfsqltype="cf_sql_timestamp">

                        )
                    </cfquery>

            </cfif>

我的总代码如下;

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>
            Untitled Document
        </title>

        <cfquery datasource="AccessTest" name="qTest">
            SELECT P.Account, P.Image, P.Image_ID, C.Remarks, C.Users, C.Accounts, C.Date_Time
            FROM PictureDB AS P
            INNER JOIN CommentsDB AS C
            ON C.Image_ID = P.Image_ID
            ORDER BY P.Image_ID
        </cfquery>

        <script src="http://code.jquery.com/jquery-2.0.3.js">

        </script>

        <script>
            $(document).ready(function(){
                  var images = {
                    <cfoutput query="qTest" group="Image_ID">
                        "#qTest.Image_ID#": {
                            "image": "#qTest.Image#",
                            "remarks": [
                            <cfoutput>
                                "#qTest.Users#, #qTest.Date_Time# <br> #qTest.Remarks# <br> </br>",
                            </cfoutput>
                            ]
                        },
                    </cfoutput>
                };
                  $("button").click(function(event){
                    event.preventDefault();
                    var id = $(this).data("id");
                    var src = images[id].image;
                    var desc = images[id].remarks.toString();

                    $("#theImage").attr("src", src).removeClass("hide");
                    $("#theDescription").html(desc).removeClass("hide");
                    });
                });
        </script>
    </head>

    <body>



                        <cfoutput query="qTest" group="Account">
                    <button data-id="#qTest.Image_ID#">
                        #qTest.Account#

                    </button>

                </cfoutput> 

                    <cfform name="InsertComments" id="InsertComments">
            <fieldset>
<div id="container">
    <div id="mainContent">


            <textarea name="Remarks" cols="55" rows="4" label="Tour Description"
                                    required="yes" validateat="OnSubmit" message="Please enter your comment here" 
                                    enabled="no">
                        </textarea>
            <input type="text" name="Image_ID" message="Please enter Account Here." 
                                 validateat="onSubmit" required="yes" id="Image_ID" size="10"
                                 maxlength="60">
                        </input>
        <input type="submit" name="insertComments" value="Insert Comments" id="submit">
                        </input>
        </div>
    </div>  
    </fieldset>
    </cfform>
        <cfif IsDefined("form.InsertComments")>

                    <cfquery datasource="AccessTest">
                        INSERT INTO CommentsDB (Remarks, Image_ID, Date_Time )
                        VALUES
                        (<cfqueryparam value="#form.Remarks#" cfsqltype="CF_SQL_LONGVARCHAR">

                        , <cfqueryparam value="#form.Image_ID#" cfsqltype="cf_sql_integer">

                        , <cfqueryparam value="#now()#" cfsqltype="cf_sql_timestamp">

                        )
                    </cfquery>

            </cfif>


                <img id="theImage" class="hide">
        <div id="theDescription" class="hide">
        </div>

        </body>
</html>

enter image description here

Answer 1

如果没有所有细节，这里有一些基本的jQuery来设置HTML表单输入的值（这是你想要的“论坛变量”吗？）。

car someImageId = 123;

// Assumes you have a button with id="myButton" to trigger this event. 
$("#myButton").click(function(){

  // Set it to a literal string
  $("#Image_ID").val("value goes here"); 

  // Or you could set it to a variable (perhaps this variable is initialized/set when the page loads w/ data from the server)
  $("#Image_ID").val(someImageId);     

});

Answer 2

如果你有：

<form method="post">
   <button data-id="#qTest.Image_ID#" type="submit" name="myButton">Save</button>
</form>

然后你会（编辑）：

(function() {
   $("button[name=myButton]").click(hollaBackGirl);
   function hollaBackGirl() {
      console.log($(this).data('id'));
      // My JavaScript goes here
   }
})();

JQuery和论坛

2 个答案: