點擊向上或向下

<select id="edit-attributes-1"> 
     <option value="44" selected="selected">0</option> 
     <option value="35">1</option> 
     <option value="36">2</option> 
     <option value="37">3</option> 
</select> 
<select id="edit-attributes-2"> 
     <option value="44" selected="selected">0</option> 
     <option value="35">1</option> 
     <option value="36">2</option> 
     <option value="37">3</option> 
</select> 
<select id="edit-attributes-3"> 
     <option value="44" selected="selected">0</option> 
     <option value="35">1</option> 
     <option value="36">2</option> 
     <option value="37">3</option> 
</select> 
<select id="edit-attributes-4"> 
     <option value="44" selected="selected">0</option> 
     <option value="35">1</option> 
     <option value="36">2</option> 
     <option value="37">3</option> 

</select> 
    <select id="edit-attributes-9" name="attributes[9]" class="form-select"> 
     <option value="44" selected="selected">0</option> 
     <option value="35">1</option> 
     <option value="36">2</option> 
     <option value="37">3</option> 
    </select> 

     <select id="edit-attributes-11" name="attributes[11]" class="form-select"> 
     <option value="45" selected="selected">0</option> 
     <option value="39">1</option> 
     <option value="41">2</option> 

    </select>

點擊向上或向下

//This Code adds <span>+</span> and <span>-</span> with their attributes 
$('select[id^="edit-attributes-"][id!="edit-attributes-12"]').after(function() { 
    var count = $(this).find('option').length; 
    return '<span class="step stepup step-' + this.id + '" id="step-up-' + this.id.substring(16) + '">+</span><span class="step stepdown step-' + this.id + '" id="step-down-' + this.id.substring(16) + '">-</span>'; 

}); 

//This code detects reacts when + or - is clicked. 
$('span[id^="step-"]').click(function() { 
    //Tokenized class name into array <span class="step stepup step-edit-attributes-1" id="step-up-1">+</span> 
    var classList = $(this).attr('class').split(/\s+/); 
    //Use for Option Index = 0 ofcourse 
    var min = 0; 
    //Use for Option Index Max = number of options in particular Select 
    var max = $("#" + classList[2].substring(5) + " option").length; 
    //Index of selected Option 
    var selected = $("#" + classList[2].substring(5) + " option:selected").index(); 
    //Value of Selected Option 
    var value = $("#" + classList[2].substring(5) + " option:selected").val(); 

    //since id is "step-up-ID" just want to get the UP or DOWN 
    var op = this.id.split("-"); 


    if (op[1] == "up") { // second token of op = up or down 

     if (value < max) { 
      value++; 
      alert(selected + ":" + value + " : " + op[1]);    
      //remove any selected option ?????? 
//MY PROBLEM IS HERE WHEN I TRY TO REMOVE EXISTING SELECTED AND SELECT A NEW OPTION AFTER THE SELECTED ONE** 

      $("#" + classList[2].substring(5) + " option:selected").removeAttr("selected"); 
      //assign new selected option ??????? 
      $("#" + classList[2].substring(5) + " option").selectedIndex=value; 
     } 
    } 
    if (op[1] == "down") { 
     if (value > min) {    
      value--; 
      alert(selected + ":" + value + " : " + op[1]); 
//MY PROBLEM IS HERE WHEN I TRY TO REMOVE EXISTING SELECTED AND SELECT A NEW OPTION BEFORE THE SELECTED ONE** 
      $("#" + classList[2].substring(5) + " option:selected").removeAttr("selected"); 
      $("#" + classList[2].substring(5) + " option").selectedIndex=value; 
     } 

    } 
});

按鈕時選擇的jQuery選擇輸入的變化選項我的目標是在這裏，當我點擊（-）會改變選擇上述1步，然後（+）選擇新選項一站下面。有人可以幫忙，也許可以優化這段代碼。我一直在嘗試游泳數小時。

來源

2012-10-10 axscode

這裏是工作版本+優化你的腳本。

//This code detects reacts when + or - is clicked. 
$('span[id^="step-"]').click(function() { 
    //Tokenized class name into array <span class="step stepup step-edit-attributes-1" id="step-up-1">+</span> 
    var classList = $(this).attr('class').split(/\s+/), 
     item  = $('#'+classList[2].substring(5)), 
     selected = item[0].selectedIndex; 

    //since id is "step-up-ID" just want to get the UP or DOWN 
    var op = this.id.split("-"); 

    var index = (op[1] == 'up' ? 1 : -1) + selected; 
    if (item.find('option')[index]) { 
     item[0].selectedIndex = index; 
    }  
});

http://jsfiddle.net/rezigned/qjVHM/15/

來源

2012-10-10 15:26:10 Rezigned

http://jsfiddle.net/qjVHM/14/ < - 哇，我更新了，我的代碼從你的代碼中看起來太noobot ..非常感謝... – axscode

@axscode別擔心，每個人都從零開始:) – Rezigned

您正在爲+和-動態生成HTML嗎？那麼你應該使用on而不是click：

http://api.jquery.com/on/

執行selects有一個共同的父div？

如果是的話那麼你的代碼更改爲類似：

$("#parentDiv").on("click", 'span[id^="step-"]', function() {....});

來源

2012-10-10 14:56:44 david

+的產生已經照顧，但點擊時gnerated +點擊......對不起，我沒怎麼上的作品點擊事件，你能調整我的代碼，所以我可以理解.. – axscode

@axscode - 請參閱代碼示例 – david

http://jsfiddle.net/qjVHM/12/ < - 我創建了這個，似乎現在與我的選擇選項工作，雖然當我按下+++它從零旋轉0 1 2 3然後回到零，而它應該堅持到3，即使我點擊更多.. – axscode

嘗試將事件委託給跨度的prentStatic容器..

$(document).on('click','span[id^="step-"]',function() {

如果您有任何靜態容器包圍此除了文件，那麼你可以使用該容器..

來源

2012-10-10 15:09:51

點擊向上或向下

回答

相關問題