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

Question

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

我正在使用$(this).children().attr('data-value') 获取值并将其提交到数据库，但即使我所做的只是投反对票，它也总是返回一个正值。

我也尝试过使用$(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")。

看看下面的小提琴：

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

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

<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>