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

How do I return negative value from data-value attribute?

本文关键字：返回 属性 数据      更新时间：2023-09-26

我有一个带有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
     });
    }
   });

仔细检查代码后，我可以看到处理程序附加到<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>

相关文章：