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的切换改变文本输入值

回答

相关问题