jQuery

Question

我正在尝试将指定文章保存为收藏夹。所以我有一个按钮，它应该获取该文章的 ID 和用户的 ID（我会将它们存储到数据库中）。我正在尝试做这样的事情：这是一个 blade...

@foreach ( $results['matches'] as $doc => $docinfo )
.
.
.
    <button  class="bookmark"><img id="favorite" align="right" src="{{ asset('/img/icon_add_fav.png')}}"></button>
    <input type="hidden" id="{{Auth::user()->id}}" value="{{Auth::user()->id}}">
    <input type="hidden" id="{{$docinfo['attrs']['sid']}}" value="{{$docinfo['attrs']['sid']}}">
.
.
.
@endforeach

到目前为止，我已经尝试在控制台中输出值：

    <script type="text/javascript">
       $('#favorite').click(function(){
          addFavorite();
       });

       function addFavorite(){
          var idUser = document.getElementById({{Auth::user()->id}}).value;
          var idArticle= document.getElementById({{$docinfo['attrs']['sid']}}).value;
      console.log(idUser + '#' + idArticle);
   }
    </script>

它只在第一篇文章的按钮被点击时打印到控制台。但是，它打印了最后一篇文章的 id...

例如...

<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="1" value="1">

<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="2" value="2">

<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="3" value="3">

这里我有三个按钮。当我按第二个和第三个时，没有任何反应。当我按下第一个时，它不会像应该的那样打印 15#1，而是打印 15#3.

我想在点击相关文章的按钮时打印id和文章id...

Answer 1

您只能有一个元素具有相同的 id - 您所有的按钮都具有相同的 id。

改为使用类连接事件处理程序，然后您可以在事件处理程序中使用 this 以便知道按下了哪个按钮。

然后您可以使用 DOM 导航 $(this).next()、link 使用属性或将它们分组到父容器中。

使用.next()：

// wire up to the button, not the image
$('button.bookmark').click(function() {
    var idUser = $(this).next().val();
    var idArticle = $(this).next().next().val();
    console.log(idUser + '#' + idArticle);
});

Answer 2

您对所有图片标签使用相同的 id。这不好。您应该使用 class 而不是 id.

所以你的 html 看起来像这样

<button  class="bookmark">
    <img class="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input class="userid" type="hidden" id="125" value="135">
    <input class="articleid" type="hidden" id="1" value="1">

<button  class="bookmark">
    <img class="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input class="userid" type="hidden" id="135" value="145">
    <input class="articleid" type="hidden" id="2" value="2">

<button  class="bookmark">
    <img class="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input class="userid" type="hidden" id="165" value="155">
    <input class="articleid" type="hidden" id="3" value="3">

和Script

  $('.bookmark').click(function(){
          var userid=$(this).next('.userid').val();
          console.log(userid);
  });

Working fiddle

Answer 3

像这样绑定点击 button 的 class bookmark

$(".bookmark").on("click",function(){
var idUser = $(this).next().val();
var idArticle = $(this).next().next().val();
console.log(idUser + "#" + idArticle);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="1" value="1">

<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="2" value="2">

<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="3" value="3">

Answer 4

也许这个解决方案会对您有所帮助。

function addFavourite(userId, articleId) {
    console.log(userId + "#" + articleId)
}

渲染时HTML

@foreach ( $results['matches'] as $doc => $docinfo )
.
.
.
    <button  class="bookmark" onClick="addFavourite(Auth::user()->id, $docinfo['attrs']['sid'])" />
.
.
.
@endforeach

jQuery - 获取每篇文章的用户id和文章id

jQuery - Get user id and article id for each article

html

javascript

laravel-blade