Question

我有一个带有data-value属性的upvote / downvote按钮，其中1和-1为值。

我正在使用$(this).children().attr('data-value')来获取值并将其提交到数据库，但即使我完成所有操作都是downvote帖子，它总是返回正值。

我也尝试使用$(this).children().data('value')，结果相同。

我正在使用jquery.upvote.js

表格

{!! Form::open(['url' => 'votes', 'class' => 'votes']) !!}
   <div class="upvote topic" data-post="{{ $post->id }}">
    <a class="upvote vote" data-value="1"></a>
    <span class="count">0</span>
    <a class="downvote vote" data-value="-1"></a>
   </div>
{!! Form::close() !!}

的Javascript

$('.topic').upvote();

$('.topic').on('click', function (e) {
    e.preventDefault();
    var data = {value: $(this).children().attr('data-value'), post_id: $(this).data('post')};

    var clicked_button = $(this).children();

    if($(clicked_button).hasClass('downvote-on')) {
        $.ajaxSetup({
        headers: {
        'X-CSRF-TOKEN': $('[name="_token"]').val()
      }
    });
        $.ajax({
            type: "POST",
            url: 'http://localhost/laravel-5/public/votes',
            dataType: 'JSON',
            data: data
     });
     } else if ($(clicked_button).hasClass('upvote-on')) {
        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('[name="_token"]').val()
           }
     });
        $.ajax({
            type: "POST",
            url: 'http://localhost/laravel-5/public/votes',
            dataType: 'JSON',
            data: data
     });
    }
   });

Answer 1

仔细检查您的代码后，我可以看到处理程序已附加到<div>而不是<a>。如果有多个<a>标记，则需要使用最后一个标记。因此，请确保将事件处理程序附加到<a>而不是任何其他人。

$('.topic .vote').on('click', function (e) {
    e.preventDefault();
    var data = {value: $(this).attr('data-value')

尝试改为使用$(element).data("value")。

查看下面的小提琴：

＆＃13;

$(function () {
  $("a").click(function () {
    event.preventDefault();
    alert("attr: " + $(this).attr("data-value") + "\ndata: " + $(this).data("value"));
  });
});

＆＃13;

* {box-sizing: border-box; margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
a {text-decoration: none;}

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<p><a href="#" data-value="-1">Get Data (-1)</a></p>
<p><a href="#" data-value="1">Get Data (1)</a></p>

＆＃13;

如何从数据值属性返回负值？

1 个答案: