Question

我从文本输入字段中获取值。

jQuery的：

$('.submitLocation').click(function(){

    // get value from input field
    var city = $(".city").val();
});

HTML

<input type="text" name="city" class="city" placeholder="City Name">
<button class="submitLocation">Set location</button></br>

当用户点击由历史搜索组成的列表项时，我希望发生同样的事情。我能够列出结果，但是当选择列表项时无法再次触发该功能。

我试图通过将城市类分配给列表项，然后创建一个触发初始函数的函数来解决这个问题。

var weather = [];
var weatherLength;
var text;
var i;

function showCurrent(currentWeather) {
console.log(currentWeather);
console.log(currentWeather.name);

weather.push( currentWeather.name );

if (typeof(Storage) !== "undefined") {

    // Store
    // saves name/s in local storage (for histoy list)
    localStorage.setItem("weather", JSON.stringify( weather ) );

    // saves name in session storage for current use
    sessionStorage.setItem("name", currentWeather.name);

    // Retrieve
    // Retrieves name from session storage 
    document.getElementById("name").innerHTML = sessionStorage.getItem("name");

    weatherLength = weather.length;
    text = "<ul>";
    for (i = 0; i < weatherLength; i++) {
        text += "<li class='city'>" + "<a href='location.html' class='submitExistingLocation'>" + weather[i] + "</a>" + "</li>";
    }
    text += "</ul>";
    document.getElementById("record2").innerHTML = text;

    $('.submitExistingLocation').click(function(){
        $('.submitLocation').click(); // Trigger search button click event
    })

HTML

<div id="record2"></div>

Answer 1

您正在创建多个包含CSS类city的列表项：

text = "<ul>";
for (i = 0; i < weatherLength; i++) {
    text += "<li class='city'>" + "<a href='location.html' class='submitExistingLocation'>" + weather[i] + "</a>" + "</li>";
}
text += "</ul>";

然后，在您的点击事件处理程序中，您将使用$(".city").val();获取值。根据jQuery中的documentation of .val() function：

[得到]匹配元素集合中第一个元素的当前值...

请注意，在您的情况下，第一个元素不一定是单击的元素。

要更正选择器，可以使用event.target属性获取已单击的元素，并将其存储在全局变量中，以便在.submitLocation的单击处理程序中可用。 / p>

另一个问题是city类正在<li>元素上设置，该元素没有值属性。因此.val()将返回undefined。为了获取列表项中的文本，您应该调用.text()而不是.val()。

以下是您的代码最终的样子：

var clickedElement = undefined;
...

$('.submitLocation').click(function(){
    if(clickedElement !== undefined) {
        // Get the TEXT from clicked list item.
        var city = $(clickedElement).text();

        // Clear the value of clicked element.
        clickedElement = undefined;
    } else {
        ...
    }
}     

...
$('.submitExistingLocation').click(function(event){
    // Keep track of the element that was clicked.
    clickedElement = event.target;

    //Trigger search button click event
    $('.submitLocation').click();
});

在链接上输入.click功能

1 个答案: