Question

当我点击拥有的id时，我试图获取帖子的image。

当我单击图像时，我想获得id在表单内的帖子。

我正在id请求中发送帖子中的Ajax，但在此之前我想拥有该id。

当我在click上image而不是获得帖子的id时，但是当我单击图像时，我得到了NAN。

这就是我要发布帖子的id的地方。

Image

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

这是我的home.blade.php

@foreach
      // id is actually post id 
     <input type="hidden" name="id" class="id" id = 'id' value="{{$post->id}}">

@endforeach

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

$(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的方法（我在第一个click处理程序中使用的方法）：

var form = $(this).closest('form');
var id = parseInt(form.find('.id').val());

.like，在我发送请求的地方，我编写了类似以下内容的代码：

 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;


}

但是那是返回NAN，为什么会这样？

请帮助，谢谢

Answer 1

答案：

对blade文件的调整。

您可以将帖子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

使用数据属性

香草JS ：

在元素上设置data属性时，可以通过该元素上的dataset对象访问它。在这种特殊情况下，您可以像这样使用它：

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

但是dataset对象可以存储各种信息，并且可以通过使用data-identifier在元素上声明的属性将它们全部应用于元素。这是其他一些示例：

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

JQuery

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

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

与其他示例一致：

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

调整代码：

我们只需要调整听起来像的第二个处理程序即可，而不必搜索element，只需使用$(this)，因为事件是在image上使用类.like。

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

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()}}'
    }

  } )
} );

单击图像后输入值返回NAN

1 个答案:

答案：

使用数据属性

调整代码：

示例代码：