iT邦幫忙

0

(已解決)javascript 滑鼠觸發控制事件 for 迴圈

下列程式是重複N個(舉兩個作範例)

希望在點選項二時,能讓選項三和四的disabled="true"

但在點回選項一時,removeAttribute("disabled")

需一次處理N個上述事件,請問有高人能指點嗎?/images/emoticon/emoticon13.gif謝謝

<div>
    <div>
    <input type="radio" onclick="check_choose1(this)" class="default_status" name="status_1-1" id="choose1-1" value="選項一">
    <input type="radio" onclick="check_choose1(this)" class="default_status" name="status_1-1" id="choose1-2" value="選項二">
    </div>
    <div>
    <input type="radio" onclick="check_choose2(this)" class="default_status" name="status_1-2" id="choose1-3" value="選項三">
    <input type="radio" onclick="check_choose2(this)" class="default_status" name="status_1-2" id="choose1-4" value="選項四">
    </div>
</div>

<div>
    <div>
    <input type="radio" onclick="check_choose1(this)" class="default_status" name="status_2-1" id="choose2-1" value="選項一">
    <input type="radio" onclick="check_choose1(this)" class="default_status" name="status_2-1" id="choose2-2" value="選項二">
    </div>
    <div>
    <input type="radio" onclick="check_choose2(this)" class="default_status" name="status_2-2" id="choose2-3" value="選項三">
    <input type="radio" onclick="check_choose2(this)" class="default_status" name="status_2-2" id="choose2-4" value="選項四">
    </div>
</div>
.
.
.
.
.
.
N個上述的範例
froce iT邦高手 1 級 ‧ 2018-11-09 20:02:06 檢舉
先去搞清楚id和class是幹嘛的吧,光看你html就覺得你沒搞懂。
小斑 iT邦新手 4 級 ‧ 2018-11-09 20:44:44 檢舉
感謝
有修正html了

2 個回答

0
淺水員
iT邦新手 5 級 ‧ 2018-11-10 01:36:14
最佳解答
function check_choose1(oRadio)
{
    //取得該層選項三與選項四
    var prefix=oRadio.id.substr(0,oRadio.id.length-1);
    var input3=document.getElementById(prefix+"3");
    var input4=document.getElementById(prefix+"4");
    
    //判斷點選的物件是選項一還是選項二,做不同的處理
    //這邊我就偷懶直接看 id 的最後一個字是什麼
    if(oRadio.id.substr(-1)==="2") {
        //選項二的處理
        input3.setAttribute("disabled",true);
        input4.setAttribute("disabled",true);
    } else {
        //選項一的處理
        input3.removeAttribute("disabled");
        input4.removeAttribute("disabled");
    }
}

這樣寫有問題吧,無論位置還是選擇input都是寫死的作法,小朋友不要學,會害到後面維護的人~
/images/emoticon/emoticon10.gif

淺水員 iT邦新手 5 級 ‧ 2018-11-10 10:01:41 檢舉

謝謝,昨天一時沒注意到,上面改了。
原本想說請樓主看您的程式碼就好,但還是有點差異,我是想說不動到他上面 html 下去寫的。

小斑 iT邦新手 4 級 ‧ 2018-11-12 10:41:06 檢舉

謝謝淺水員,您提供的方法可以使用,容易懂又沒有動到原本html/images/emoticon/emoticon41.gif

1

既然都有id了,當然要從id下手,好懶得寫,但看不下去了,還有一定不要用onclick這種蠢作法~

function itemCheckProc(n)
{
    for(var i=0; i <= n; ++i) {
        var radioAry = [];
        for(var j=0; j <= 4; ++j) {
            var radio = document.getElementById('choose'+i+'-'+j);
            radioAry.push(radio);
        }
        radioAry[0].onclick = function(){        
            radioAry[2].setAttribute("disabled",true);
            radioAry[3].setAttribute("disabled",true);
        };
        radioAry[1].onclick = function(){        
            radioAry[2].removeAttribute("disabled");
            radioAry[3].removeAttribute("disabled");
        };
    }
}
itemCheckProc(10);
淺水員 iT邦新手 5 級 ‧ 2018-11-10 10:14:36 檢舉

這程式是不是有 closure 共用 radioAry 變數的問題?
也就是說上面所有 click 事件改變的都會是最後一組資料
(點 #choose1-1 卻會改變 #choose10-3 跟 #choose10-4)

淺水員 iT邦新手 5 級 ‧ 2018-11-11 11:27:57 檢舉

當作練習,稍微改了一下,主要有:

  • 不需要指定 n ,改自動偵測
  • 修正閉包產生的問題
function initChooseEvents()
{
    var i,j,oRadio,radioAry;
    for(i=1;true;++i)
    {
        //暫存 #choose-{i}-{1-4} 到 radioAry
        //如果不存在直接 return 離開這個函式
        radioAry=[];
        for(j=1;j<=4;++j)
        {
            oRadio=document.getElementById('choose'+i+'-'+j);
            if(!oRadio) //當找不到元素時離開
                return;
            radioAry.push(oRadio);
        }
        
        //設定選項一處理
        radioAry[0].onclick=paramBind(function(oRadio3,oRadio4){
            oRadio3.removeAttribute("disabled");
            oRadio4.removeAttribute("disabled");
        },radioAry[2],radioAry[3]);
        
        //設定選項二處理
        radioAry[1].onclick=paramBind(function(oRadio3,oRadio4){
            oRadio3.setAttribute("disabled",true);
            oRadio4.setAttribute("disabled",true);
        },radioAry[2],radioAry[3]);
    }
    
    //為了避免閉包共用變數的問題,使用這個函式來包裝
    function paramBind(callback)
    {
        var params=[].slice.call(arguments).slice(1);
        return function(evt){
            callback.apply(null,params);
        }
    }
    
    /*
    function paramBind(callback,...params) //ES6支援
    {
        return function(evt){
            callback.apply(null,params);
        }
    }*/
}
initChooseEvents();
小斑 iT邦新手 4 級 ‧ 2018-11-12 10:45:47 檢舉

感謝跟著鄉民看熱鬧提供的方法
考慮到後面維護的人
也是我需要再學習的
/images/emoticon/emoticon41.gif

我要發表回答

立即登入回答