需要将类更改为id

Question

我正在尝试使用class =“emailSent”访问div，但我无法访问div。

这是在php中使用while循环生成的HTLML代码：

    <tr><td>TR 1</td></tr><tr>
    <td colspan="7">
        <div class="replyDiv" align="center" style="display:none; margin:10px 60px 10px 10px;">

            <form width="350px" id="userReplyForm" name="userReplyForm" method="post" action="#">
            <input type="hidden" id="date" name="date" value="'.time().'"/>
            <input type="hidden" id="sender" name="sender" value="'.$username.'"/>
            <input type="hidden" id="recipient" name="recipient" value="'.$sender.'"/>
            <table align="center" width="350px" class="smallTxt userDetails">
                <tr>
                    <td align="left" width="350px"><input type="text" id="subject" name="subject" size=30 value="RE:'.$subject.'"/></td></tr>
                <tr>
                    <td width="350px"><textarea rows="6" cols="42" id="message" name="message"></textarea></td></tr>
                <tr>
                    <td align="center"><input type="submit" name="Submit" class="submitBtnSmallLong" value="Send Reply"/></td></tr>
            </table>
            </form>

        </div>
        <div class="emailSent" align="center" style=" margin:10px 60px 10px 10px; color:blue; font-size:18px;">
        </div>
    </td>
</tr>

所以我所拥有的是为每条记录生成2行表。如何仅访问该记录的相应div （我不想更新行中的所有div，只是正在处理的那个）： 1.）div与类“replyDiv”？ 2.）div与类“emailSent”??

我试过用$（“。replyDiv”）直接访问div。隐藏（）;但它不起作用。

好的，这是jQuery部分：

    $(function(){//getUserReply, send to process.php
        $("form").submit(function(){
            var dataString = $(this).serialize();
            var message = $(this).find("#message").val();

        if(message==""){alert("Please enter your message");
            }else{
            $.ajax({
                type: "POST",
                url:  "process.php",
                action: "submitForm",
                data: dataString,
                dataType: "JSON",
                cache: false,
                success: function(data){
                    if(data == "true"){//hide replyDiv and show emailSent div
                        $("form").closest("tr").find(".emailSent").append("hello"); //this line appends hello to all the .emailSent divs. Remember, I have many rows so only want this particular div being shown.                      
                        return false;
                    }

                }
            });

        }
            return false;
        });
    });

Answer 1

查看您的代码，您将其定义为一个类而不是id

<div class="emailSent" align="center" style=" margin:10px 60px 10px 10px; color:blue;   font-size:18px;">
    </div>

需要将类更改为id

<div id="emailSent" align="center" style=" margin:10px 60px 10px 10px; color:blue; font-size:18px;">
    </div>

Answer 2

<强>更新

这是一个应该有效的代码版本（基本上它只是应用我在下面写的内容，我还重新构建了一下）：

$("form").submit(function(e){
    e.preventDefault(); // <- better than `return false`

    // get reference to elements:
    var $replyDiv = $(this).parent();
    var $emailSent = $(this).parent().next();
    // or
    // var $emailSent = $(this).closest('td').find('.emailSent');

    // you should give the form elements classes!
    if(!$(this).find("#message").val()){
        $.ajax({
           type: "POST",
           url:  "process.php", // `action` does not exist as option
           data:  $(this).serialize(),
           dataType: "JSON",
           cache: false,
           success: function(data){
              if(data == "true"){//hide replyDiv and show emailSent div
                $replyDiv.hide();
                $emailSent.append('hello').show();                   
              }
           }
        });
    }
    else {
        alert("Please enter your message");
    }
});

根据您的上一条评论，我假设您将通过Ajax请求将表单数据发送到服务器，并且您希望访问success回调中的某些特定信息。

$('.replyDiv form').submit(function(e) {
    e.preventDefault();

    //                form           emailSent
    //                  v               v
    var $emailSent = $(this).parent().next();
    //                         ^
    //                     replyDiv

    $.ajax({
        //...
        success: function() {
            // here you want the reference
            $emailSent.text('Worked!');
        }
    });
});

顺便说一下。如果你真的有这些行的多个，那么你不能给表单元素ID。

Jquery：访问元素

2 个答案:

需要将类更改为id