jQuery .click 在 if/else 语句中不起作用

jQuery .click not working in if/else statement

本文关键字:语句 不起作用 else click if jQuery      更新时间:2023-09-26

我的应用程序中有与Foursquare API的连接。用户可以键入一个框以开始搜索场地,也可以单击两个场地链接之一,以使用这两个地点之一填充同一个选择框。我在让用户单击两个场地之一时遇到问题。这是我的代码:

.JS:

function venueFormatSelection(venue) {
  if ( venue.name && venue.location.address ) {
    // if a user starts typing into a box, venue.name and venue.address values will  pop up for them to select from. OR in the 'else' case, they can click one of either two links
  else {
    $("#bigdrop_set").click(function () {
      return $('#bigdrop_set').attr('venue_name')
    })
    $("#bigdrop_set_2").click(function () { 
      return $('#bigdrop_set_2').attr('venue_name_2')
    })
  }
}

.HTML:

<span class="which_venue" id="bigdrop_set" venue_name='foo' venue_data='FOO'><%= link_to(FOOOOO) %></span>
<span class="which_venue" id="bigdrop_set_2" venue_name_2='bar' venue_data_2='BAR'><%= link_to(BARRRR) %></span>

出于某种原因,"单击以填充"JS仅在仅包含"返回"行之一而不包含.click函数时才有效:

return $('#bigdrop_set').attr('venue_name')

我的"else"语句中的代码有什么问题?谢谢!

 $(".bigdrop_set").click(function () {
  return $('#bigdrop_set').attr('venue_name')
  })

应该是:

$("#bigdrop_set").click(function () {
  return $('#bigdrop_set').attr('venue_name')
 })

当您选择具有 ID 的元素时bigdrop_set而不是具有类bigdrop_set的元素。ID 应该是唯一的,在您的代码中,您有重复的 bigdrop_set ID 应该更改。

我还建议将单击元素绑定在$(document).ready()函数上,而不是在venueFormatSelection函数中。

从单击函数返回值也没有多大意义。 要么直接在函数中操作值,要么将其放在另一个函数本身中,而不是放在 click 事件中。

例如:

function alertVenue(venue) {
   alert(venue)
}
$("#bigdrop_set").click(function () {
   var venue = $('#bigdrop_set').attr('venue_name')
   alertVenue(venue);
})

你有类似的东西

$(".bigdrop_set").click(function () {
  return $('#bigdrop_set').attr('venue_name')
})

你真的是指 css 类选择器 .bigdrop_set 然后 id 选择器 #bigdrop_set .

我通过使用全局变量找到了修复方法。怀疑这是最干净的方法,但它现在有效:

$("#bigdrop_set").click(function () { 
  window.clickVenue = $('#bigdrop_set').attr('venue_name');
  $(".bigdrop").select2("val", $('#bigdrop_set').attr('venue_data'));
});
$("#bigdrop_set_2").click(function () { 
  window.clickVenue = $('#bigdrop_set_2').attr('venue_name_2');
  $(".bigdrop").select2("val", $('#bigdrop_set_2').attr('venue_data_2'));
});
function venueFormatSelection(venue) {
  if (venue.name && venue.location.address) {
    var imageSource = venue.categories[0].icon.prefix.slice(0, -1) + venue.categories[0].icon.suffix;
    return "<img src='" + imageSource + "' height='20' width='20' />" + "   " + venue.name + " (" + venue.location.address + ")";
  }
  else {
    return window.clickVenue;
  }
}