Javascript 单击图像后，输入值返回NAN

当我点击我拥有的

图像时，我正试图获取帖子的
id

当我点击图片时，我想获取表单中帖子的
id

我将在
Ajax
请求中发送帖子的
id
，但在此之前，我希望获得
id

当我
单击
图像上的
而不是获取帖子的
id
时，但是当我单击图像时，我得到
NAN

下面是我为获得帖子的
id
所做的工作

图像

  <img src='uploads/avatars/uw.png' class="like" style="width:25px;height:25px;" alt=""
               >

单击
图像
时，将运行以下代码：

$(document).ready(function(){

 // here I've two click handlers like


 // first click handler
 $('something').on('click',function(){

     // here I've retrieved the `id` of post using this:
     var form = $(this).closest('form');  // this works fine for this handler but not for the second one i.e for image



  });

 // second click handler
// click handler for the image click
   $('.like').on('click',function(event){
       event.preventDefault();
       var form = $(this).closest('form');

       var id = parseInt(form.find('.id').val());
       var islike = event.target.previousElementSibling == null;

       alert(id);
       $.ajax({
                method:'POST',
                url:'like',
                data:{islike:islike,id:id, _token: '{{csrf_token()}}'}

        })

            // call back function

            .done(function(){
                // change the page
        });

   });





});

我使用的方法已经用于获取帖子的
id
（我在first
click
handler中使用的方法）：

。比如
在我发送请求时，我编写了如下代码：

 public function likePost(Request $request){


    $post_id     = $request['id']; // postId is being send from ajax function
    $islike = $request['islike'] ==='true';
    $update = false;

    $post = find($post_id); // find that post

    if(!$post){
        return null;
    }

    $user = Auth::user();
    // check if I already like thi post.
    $like = $user->likes()->where('post_id',$post_id)->first();

    if($like){
        $already_like = $like->like; // second like is the column name
        $update = true;
        // undo like , if I liked it and I click on like then UNDO liking
        if($already_like == $like){
            // undo like here
            $like->delete();
            return null;
        }
    }else{
        $like = new Like();
    }

    $like->like = $islike;
    $like->user_id = $user->id;
    $like->post_id = $post->id;

    if($update){
        $like->update();
    }else{
        $like->save();

    }

    return null;


}

但那是回来了，为什么会这样

请帮忙，谢谢
回答：
调整您的
刀片
文件

您可以将post
id
作为属性包含在
img
元素本身中：

@foreach

  <input type="hidden" name="id" class="id" id = 'id' value="{{$post->id}}">
  <img src='uploads/avatars/uw.png' class="like" style="width:25px;height:25px;" alt="" data-id="{{$post->id}}" />

@endforeach

但是，
数据集
对象可以存储各种信息，并且它们都可以通过使用
数据标识符
在元素上声明的属性应用于元素。以下是一些其他示例：

element.dataset.number; // data-number=5
element.dataset.group; // data-group="some group guid"

JQuery

在
JQuery
中，您可以使用提供的
.data
方法更轻松地访问数据。可以这样使用：

img.dataset.id; // data-id="whatever";

$(image).data("id");

与其他示例一致：

$(element).data("number"); // data-number=5
$(element).data("group"); // data-group="some group guid"


调整代码：
我们只需要调整您的第二个处理程序，它听起来像，而不是搜索
元素
，您可以简单地使用
$（this）
，因为事件是通过类
在
图像
上调用的

由于在
blade
文件中将其作为字符串应用，因此仍然需要使用
parseInt
，但可以将
id
声明重写为：

var id = parseInt( $( this ).data( "id" ) );

我认为，其余的可以保持不变


示例代码：
与其创建隐藏的
输入
框，不如简单地将
数据
属性附加到
img
标记。a、 e.
id}“/>
然后单击，只需将其从图像元素中拉出即可。a、 e.
HTMLImageElement.dataset.id
如何在
第二个
单击处理程序中使用id@zfrischI很乐意写一个答案，但我不知道
是什么样的
？我不明白为什么您要搜索上一个元素，将结果转换为布尔值，然后将其发送到您的请求中？控制台中显示此
HTMLImageElement.dataset未定义。实际上，我正在做喜欢和喜欢的过程disliking@contributor如果我有什么误解，请告诉我。谢谢。是的，这是有效的，但我认为这会导致另一个错误。作为对ajax调用的响应，我得到了
内部服务器错误
，为什么会这样@zfrischI获得帖子的
id
，然后我将其发送到
/like
，在那里我有一些代码来处理它。请看一下更新后的帖子，我马上就要更新了请看一下更新后的帖子，看看它出现了什么问题
内部服务器错误
@zfrischthanks谢谢你的帮助，我解决了由于其他原因造成的问题，但是我问的问题解决了我的相关问题。谢谢亲爱的@zfrisch
$(element).data("number"); // data-number=5
$(element).data("group"); // data-group="some group guid"

var id = parseInt( $( this ).data( "id" ) );

// click handler for the image click
$( '.like' ).on( 'click', function( event ) {
  event.preventDefault();


  var id = parseInt( $( this ).data( "id" ) );
  var islike = event.target.previousElementSibling == null;

  $.ajax( {
    method: 'POST',
    url: 'like',
    data: {
      islike: islike,
      id: id,
      _token: '{{csrf_token()}}'
    }

  } )
} );