select.prev(".class").val(); возвращает неопределенное значение

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я пытаюсь вернуть значение, связанное с классом на html-странице. Он не возвращает указанное значение, он возвращает неопределенное. Я добавил консоль.войдите, чтобы показать, что я выводю, и в нем указано неопределенное.

 $(document).on("change", "select.playlist", function() {
  var select = $(this);
  var songId = select.prev(".songId").val();
  var playlistId = select.val();
  //selects dropdown menu thats currently selected
  console.log("playlistId: "   playlistId);
  console.log("songId: "   songId);
});

function showOptions(button) {
  var songId = $(button).prevAll(".songId").val();
  var menu = $(".optionsMenu");

  var menuWidth = menu.width();
  menu.find(".songId").val(songId);

  var scrollTop = $(window).scrollTop();

  var elementOffset = $(button).offset().top;

  var top = elementOffset - scrollTop;

  var right = $(button).position().right;

  menu.css({
    "top": top   8   "px",
    "right":  menuWidth - 100   "px",
    "display": "inline"
  });
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='songOptions'>
  <input type='hidden' class='songId' value='" . $albumTrack->getId() . "'>
  <img class='optionsButton' onclick='showOptions(this)' src='assets/images/icons/more.png'>
</div>

Console.log() должен выводить значение, соответствующее тому, которое вы видите при проверке элементов.

1. куда вы включаете свой js-файл в html-документе? вам следует рассмотреть возможность размещения вашей логики внутри $(document) . ready() таким образом, весь ваш html загружается перед вашим js. Я предполагаю, что ваш js загружается первым, и именно поэтому у вас есть undefined

Ответ №1:

Проблема, с которой вы сталкиваетесь, на самом деле заключается в том, что когда вы вызываете this в onclick, как вы, вы получаете HTML тег, а не сам объект. Я удалил onclick и изменил его на прослушиватель событий щелчка, и это работает.

 $(document).on("change", "select.playlist", function() {
  var select = $(this);
  var songId = select.prev(".songId").val();
  var playlistId = select.val();
  //selects dropdown menu thats currently selected
  console.log("playlistId: "   playlistId);
  console.log("songId: "   songId);
});



$(document).on("click",".optionsButton",function(){
  var songId = $(this).prevAll(".songId").val();
  console.log(songId);
  var menu = $(".optionsMenu");

  var menuWidth = menu.width();
  menu.find(".songId").val(songId);

  var scrollTop = $(window).scrollTop();

  var elementOffset = $(this).offset().top;

  var top = elementOffset - scrollTop;

  var right = $(this).position().right;

  menu.css({
    "top": top   8   "px",
    "right":  menuWidth - 100   "px",
    "display": "inline"
  });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='songOptions'>
  <input type='hidden' class='songId' value='" . $albumTrack->getId() . "'>
  <img class='optionsButton' src='assets/images/icons/more.png'>
</div>