jQuery的切換改變文本輸入值

我有此HMTL結構jQuery的切換改變文本輸入值

.list, .list ul{ 
 
list-style-type: none; 
 
}

<ul class="list"> 
 
    
 
    <li class="radioSettings"> 
 
    \t <ul> 
 
    \t \t <li> 
 
    \t \t \t <span> 
 
    \t \t \t \t <input type="radio" value="white"> 
 
    \t \t \t </span> 
 
    \t \t </li> 
 
    
 
    \t \t <li> 
 
    \t \t \t <span> 
 
    \t \t \t \t <input type="radio" value="dark"> 
 
    \t \t \t </span> 
 
    \t \t </li> 
 
    \t </ul> 
 
     
 
    </li> 
 
    <li id="colors_body"> 
 
     <input type="text" value="ffffff" class="color"> 
 
    </li> 
 
    <li id="colors_wrapper"> 
 
     <input type="text" value="000000" class="color"> 
 
    </li> 
 
    <li id="colors_footer"> 
 
     <input type="text" value="575757" class="color"> 
 
    </li> 
 
</ul>

基本上，一束文本輸入類型的值是十六進制的顏色代碼
和兩個無線電輸入類型的與「白色」和「黑暗」的值

現在用JavaScript我想改變每個文本輸入值不同的顏色代碼，當我點擊「白色」或「黑暗」弧度IO類型

例如，如果我點擊[值= 「白色」]爲colors_body chnage值用於colors_wrapper FFFFFF
值更改爲E6E6E6
，等等...

我做了我自己的嘗試，但無論我做什麼，我總是被卡在改變輸入值，看看我的代碼，如果我接近我想要完成並更好地理解我想要做的事

var colorizer = { 
    'white': { 
     'colors_body': 'FFFFFF', 
     'colors_wrapper': 'E6E6E6', 
     'colors_footer': 'CCCCCC' 
    }, 
    'dark': { 
     'colors_body': 'EBEEF2', 
     'colors_wrapper': 'B2B5B8', 
     'colors_footer': '1A2758' 
    }, 
}; 

$('#radioSettings input[type="radio"]').change(function() { 
    var val = $(this).val(); 
    if (colorizer[val]) { 
     for (var i in colorizer[val]) { 
      if ($('#colors_' + i).length) { 
       //IM GETTING STUCK HERE to change each of the values accordingly 
      } 
     } 
    } 

});

來源

2017-06-19 Nippledisaster

幾件事需要改變。

首先識別HTML屬性不匹配您使用的是您的jQuery的是什麼：你需要$(".radioSettings [type=radio]")

選擇您的切換輸入你還需要確保你的單選按鈕有相同的值他們的名字屬性，所以他們不能同時被選中。在我下面鏈接的答案代碼中，我使用了name="color"。

最後，當您循環瀏覽屬性時，需要更正要查找的元素的ID，因爲迭代i時的屬性名稱爲colors_body例如，所以您試圖選擇$("#colors_colors_body")。

var colorizer = { 
 
    'white': { 
 
     'colors_body': 'FFFFFF', 
 
     'colors_wrapper': 'E6E6E6', 
 
     'colors_footer': 'CCCCCC' 
 
    }, 
 
    'dark': { 
 
     'colors_body': 'EBEEF2', 
 
     'colors_wrapper': 'B2B5B8', 
 
     'colors_footer': '1A2758' 
 
    }, 
 
}; 
 

 
$('.radioSettings [type="radio"]').change(function() { 
 
    var val = $(this).val(); 
 
    if (colorizer[val]) { 
 
     for (var i in colorizer[val]) { 
 
      if ($('#' + i).length) { 
 
       $('#' + i).find('input').val(colorizer[val][i]); 
 
      } 
 
     } 
 
    } 
 

 
});

.list, .list ul{ 
 
list-style-type: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="list"> 
 
    
 
    <li class="radioSettings"> 
 
    \t <ul> 
 
    \t \t <li> 
 
    \t \t \t <span> 
 
    \t \t \t \t <input type="radio" name="color" value="white"> 
 
    \t \t \t </span> 
 
    \t \t </li> 
 
    
 
    \t \t <li> 
 
    \t \t \t <span> 
 
    \t \t \t \t <input type="radio" name="color" value="dark"> 
 
    \t \t \t </span> 
 
    \t \t </li> 
 
    \t </ul> 
 
     
 
    </li> 
 
    <li id="colors_body"> 
 
     <input type="text" value="ffffff" class="color"> 
 
    </li> 
 
    <li id="colors_wrapper"> 
 
     <input type="text" value="000000" class="color"> 
 
    </li> 
 
    <li id="colors_footer"> 
 
     <input type="text" value="575757" class="color"> 
 
    </li> 
 
</ul>

來源

2017-06-19 22:23:06

真棒！非常感謝：） – Nippledisaster

簡化：

var colorizer = { 
 
    'white': { 
 
    'colors_body': 'FFFFFF', 
 
    'colors_wrapper': 'E6E6E6', 
 
    'colors_footer': 'CCCCCC' 
 
    }, 
 
    'dark': { 
 
    'colors_body': 'EBEEF2', 
 
    'colors_wrapper': 'B2B5B8', 
 
    'colors_footer': '1A2758' 
 
    }, 
 
}; 
 

 
$('[type="radio"]').change(function() { 
 
    var val = $(this).val(); 
 
    if (colorizer[val]) { 
 
    for (var i in colorizer[val]) { 
 
     $('#'+i).val(colorizer[val][i]); 
 
    } 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<label><input type="radio" name="color" value="white">White</label> 
 
<label><input type="radio" name="color" value="dark">Dark</label> 
 

 
<br><input type="text" placeholder="ffffff" id="colors_body"> 
 
<br><input type="text" placeholder="000000" id="colors_wrapper"> 
 
<br><input type="text" placeholder="575757" id="colors_footer">

來源

2017-06-19 22:34:33 Will

的解決方案，我想出了是這樣的;

$(this).val函數內部獲取無線電輸入的當前值，然後根據它從對象中抓取數據。

var colorizer = { 
 
    'white': { 
 
    'colors_body': 'FFFFFF', 
 
    'colors_wrapper': 'E6E6E6', 
 
    'colors_footer': 'CCCCCC' 
 
    }, 
 
    'dark': { 
 
    'colors_body': 'EBEEF2', 
 
    'colors_wrapper': 'B2B5B8', 
 
    'colors_footer': '1A2758' 
 
    }, 
 
}; 
 

 
$('input:radio').on('click', function() { 
 
    var currentValue = $(this).val(); 
 
    $('#colors_body input').val(colorizer[currentValue].colors_body); 
 
    $('#colors_wrapper input').val(colorizer[currentValue].colors_wrapper); 
 
    $('#colors_footer input').val(colorizer[currentValue].colors_footer); 
 

 
});

.list, 
 
.list ul { 
 
    list-style-type: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list"> 
 
    <li class="radioSettings"> 
 
    <ul> 
 
     <li> 
 
     <span> 
 
    \t \t \t \t <input type="radio" value="white"> 
 
    \t \t \t </span> 
 
     </li> 
 

 
     <li> 
 
     <span> 
 
    \t \t \t \t <input type="radio" value="dark"> 
 
    \t \t \t </span> 
 
     </li> 
 
    </ul> 
 

 
    </li> 
 
    <li id="colors_body"> 
 
    <input type="text" value="ffffff" class="color"> 
 
    </li> 
 
    <li id="colors_wrapper"> 
 
    <input type="text" value="000000" class="color"> 
 
    </li> 
 
    <li id="colors_footer"> 
 
    <input type="text" value="575757" class="color"> 
 
    </li> 
 
</ul>

來源

2017-06-19 22:46:59 Ozan

有點遲到了，但嘗試另一種方法......

var colorizer = {} 

colorizer['white'] = { 
    'colors_body': 'FFFFFF', 
    'colors_wrapper': 'E6E6E6', 
    'colors_footer': 'CCCCCC' 
} 

colorizer['dark'] = { 
    'colors_body': 'EBEEF2', 
    'colors_wrapper': 'B2B5B8', 
    'colors_footer': '1A2758' 
} 

$('input[name="colorizer"]').change(function() { 
    var color = $(this).val(); 
    $.each(colorizer[color], function(i,v) { 
    $('#'+i+' input').val(v); 
    }); 
});

看到這裏的工作小提琴：https://jsfiddle.net/joshmoto/po0zd43o/

來源

2017-06-19 23:35:25 joshmoto

jQuery的切換改變文本輸入值

回答

相關問題