解析變量進出功能jquery

我確信這只是一個簡單的，但它讓我難住了幾個不同的項目現在..我必須不斷聲明我的變量，並且我確定有一個更好的做事方式。解析變量進出功能jquery

在下面的例子中，我發現在「#gender」階段「性別」打印出來很好，但「#age」階段「性別」不再被定義爲& /或沒有被帶到另一個功能。

一個例子：

var gender; 
var age; 
var children; 


$('#gender li:contains(Male)').click(function() { 
    gender = "male"; 
    $('#age').show(); 
    $('span.jquery_out').text(gender); 
}); 
$('#gender li:contains(Female)').click(function() { 
gender = "female"; 
$('#age').show(); 
$('span.jquery_out').text(gender); 
}); 

$('#age li:contains(1)').click(function() { 
    var age = "1"; 
    $('#children').show(); 
    $('span.jquery_out').text(gender+" -> "+age); 
}); 
$('#age li:contains(2)').click(function() { 
    var age = "2"; 
    $('#children').show(); 
    $('span.jquery_out').text(gender+" -> "+age); 
}); 
$('#age li:contains(3)').click(function() { 
    var age = "3"; 
    $('#children').show(); 
    $('span.jquery_out').text(gender+" -> "+age); 
}); 
$('#age li:contains(4)').click(function() { 
    var age = "4"; 
    $('#children').show(); 
    $('span.jquery_out').text(gender+" -> "+age); 
}); 
$('#age li:contains(5)').click(function() { 
    var age = "5"; 
    $('#children').show(); 
    $('span.jquery_out').text(gender+" -> "+age); 
});

希望某人有一個答案，我敢肯定，它不是一個棘手的知道什麼時候一個。在此先感謝。馬特

來源

2010-02-15 mdskinner

你的html是什麼樣的？ – PetersenDidIt 2010-02-15 01:46:30

我不知道您的標記是什麼樣子，但你的jQuery可以大大簡化。

在我繼續之前，值得注意的是，你所擁有的基本上是表單字段，但是你正在使用它們的列表。這非常不理想，我建議使用listbox（select）或單選按鈕，然後設計它們的樣式。有很多jQuery插件可以用來組合這些表單項，如Fancy Radio Buttons With jQuery（請參閱demo）。

然後：

<div id="gender"> 
    <input type="radio" name="gender" value="male"> Male 
    <input type="radio" name="gender" value="female"> Female 
</div> 
<span class="jquery_out"></span>

而不是使用:contains()和多個選擇更容易做到：

var gender; 
var age; 
$("#gender :radio").click(function() { 
    gender = $(this).val(); 
    update(); 
}); 

function update() { 
    var text = gender || ""; 
    if (text.length > 0) { 
    text += " -> "; 
    } 
    text += age || ""; 
    $("span.jquery_out").text(text); 
}

年齡的標記和代碼大體相同。

來源

2010-02-15 02:04:02 cletus

哇，非常感謝！我需要開始寫清潔JavaScript標記的肯定。 – mdskinner 2010-02-15 02:52:28

我在使用= + 在我的例子中遇到了麻煩，我只使用了3個變量，事實上我得到了12個。它一直工作正常，直到我嘗試添加第三個和第四個。我無法以所需的方式構建「 - >」位。你能幫助嗎？非常感謝馬特 – mdskinner 2010-02-15 04:39:00

聽起來像是你需要做的是標準化數據所在的位置在你的HTML，讓你的功能，這樣你可以找到它：

var gender; 
var age; 
var children; 
$('#gender li').click(function() { 
    gender = $(this).text(); //or some other selection to find the value 
    $('#age').show(); 
    $('span.jquery_out').text(gender); 
}); 
$('#age li').click(function() { 
    age = $(this).text(); //or some other selection to find the value 
    $('#children').show(); 
    $('span.jquery_out').text(gender+" -> "+age); 
});

來源

2010-02-15 01:52:10 PetersenDidIt

嘗試這種風格，消除了對變量的需要：

$('#gender li').click(function() { 
    $(this).addClass("selected").siblings().removeClass("selected"); 
    $('#age').show(); 
    $('span.jquery_out').text($(this).text()); 
}); 
$('#age li').click(function() { 
    $(this).addClass("selected").siblings().removeClass("selected"); 
    $('#children').show(); 
    $('span.jquery_out').text($("#gender li.selected").text() + " -> " + $(this).text()); 
}

你只是分配一個CSS類進行跟蹤瞭解，如果你想樣式它來顯示它的選擇，可以做到這一點作爲一個獎金。

來源

2010-02-15 02:04:43

解析變量進出功能jquery

回答

相關問題