Javascript添加值，顯示div

Question

我已經修改了其他人的小提琴作為起點，但這是我想要完成的工作：

如果用戶從每個下拉列表中選擇第一個選項，則將顯示隱藏的div。 它添加已分配給這兩個選項的值，然后將div從opacity：0更改為opacity：1.就是這樣。

這是身體：

<body>

    <select id="selectionA" name="selection" onchange="Place2go(this.value, this.id)">
        <option value="0">Select one</option>
        <option value="1">West</option>
        <option value="9">East</option>
        <option value="18">North</option>
        <option value="27">South</option>
    </select>

    <select id="selectionB" name="selection" onchange="Place2go(this.value, this.id)">
        <option value="0">Select one</option>
        <option value="5">Winter</option>
        <option value="6">Spring</option>
        <option value="7">Summer</option>
        <option value="8">Fall</option>
    </select>

    <p id="output">TEST 123</p>

 </body>

這是JS：

function Place2go(item, where){
    var One = document.getElementById("selectionA").value;
    var Two = document.getElementById("selectionB").value;
    if(One != 0 && Two !=0){
        var Addie = Number(One) + Number(Two);
        switch(Addie){
            case 6:           // IF FIRST SELECTION OF BOTH ARE CHOSEN    1+5
                $("#output")
                    .animate(
                        { opacity: 1 }, 1000
                    );    // EXECUTE YOUR 'GO TO URL' HERE
                break;
            default:
                alert('def');
        }
    }
});

這是CSS：

#output {
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 13px/20px; 
    font-style: normal;
    font-weight: 100;
    text-align: center;
    opacity: 0.1;
}

這是小提琴： http : //jsfiddle.net/ys3GS/55/

我在這里做錯了什么？

Answer 1

當您在jsfiddle中使用jQuery時，它將所有javascript放入$（window）.load（）事件中。 因此，您的函數僅在該事件內部定義。 您可以將函數附加到jQuery對象並以這種方式調用它。

參見我的jsfiddle示例。 這是隨附的代碼：

HTML：

<h2>pick an option</h2>

<select id="selectionA" name="selection" onchange="$(this).Place2go(this.value, this.id)">
    <option value="0">Select one</option>
    <option value="1">West</option>
    <option value="9">East</option>
    <option value="18">North</option>
    <option value="27">South</option>
</select>
<select id="selectionB" name="selection" onchange="$(this).Place2go(this.value, this.id)">
    <option value="0">Select one</option>
    <option value="5">Winter</option>
    <option value="6">Spring</option>
    <option value="7">Summer</option>
    <option value="8">Fall</option>
</select>
<p id="output">TEST 123</p>

Javascript：

$.fn.Place2go = function (item, where) {
    var One = document.getElementById("selectionA").value;
    var Two = document.getElementById("selectionB").value;
    if (One != 0 && Two != 0) {
        var Addie = Number(One) + Number(Two);
        switch (Addie) {
            case 6:
                // IF FIRST SELECTION OF BOTH ARE CHOSEN    1+5
                $("#output")
                    .animate({
                    opacity: 1
                }, 1000); // EXECUTE YOUR 'GO TO URL' HERE
                break;
            default:
                alert('def');
        }
    }
}

Answer 2

唯一的錯誤是在js的最后一行“}）;”中 去掉 ”）;” 只允許“}”就這樣！

function Place2go(item, where) {            
            var One = document.getElementById("selectionA").value;
            var Two = document.getElementById("selectionB").value;
            if(One != 0 && Two !=0){
                var Addie = Number(One) + Number(Two);                         
                switch(Addie){
                    case 6:           // IF FIRST SELECTION OF BOTH ARE CHOSEN    1+5
                        $("#output")
                            .animate(
                                { opacity: 1 }, 1000
                            );    // EXECUTE YOUR 'GO TO URL' HERE
                        break;
                    default:
                        alert('def');
                }
            }
        }

Javascript添加值，顯示div

問題描述

2 個解決方案

解決方案1
0 已采納 2015-11-19 15:35:22

解決方案2
0 2015-11-19 15:42:39

Javascript添加值，顯示div

問題描述

2 個解決方案

解決方案1 0 已采納 2015-11-19 15:35:22

解決方案2 0 2015-11-19 15:42:39

解決方案1
0 已采納 2015-11-19 15:35:22

解決方案2
0 2015-11-19 15:42:39