Question

我有这个HMTL结构

＆＃13;

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

＆＃13;

<ul class="list">
    
    <li class="radioSettings">
    	<ul>
    		<li>
    			<span>
    				<input type="radio" value="white">
    			</span>
    		</li>
    
    		<li>
    			<span>
    				<input type="radio" value="dark">
    			</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>

＆＃13;

基本上，一堆文本输入类型的值是HEX颜色代码
和两个无线电输入类型＆＃34;白色＆＃34;和＆＃34;黑暗＆＃34;值

现在使用javascript我想将每个文本输入值更改为不同的颜色代码，当我点击＆＃34; white＆＃34;或者＆＃34;黑暗＆＃34;无线电类型

例如，如果我点击 [value =＆＃34; white＆＃34;]
for colors_body chnage value to FFFFFF
对于colors_wrapper，将值更改为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 
            }
        }
    }

});

Answer 1

简化：

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">

Answer 2

派对有点晚，但尝试另一种方法......

config.vm.synced_folder ".", "/home/ubuntu/qb-online", type: "nfs"

请在此处查看工作小提琴：https://jsfiddle.net/joshmoto/po0zd43o/

Answer 3

有些事情需要改变。

首先，HTML中的识别属性与您在jQuery中使用的属性不匹配：您需要选择$(".radioSettings [type=radio]")

的切换输入

您还需要确保您的单选按钮的名称属性具有相同的值，以便不能同时选中它们。在下面链接的答案代码中，我使用了name="color"。

最后，当您遍历属性时，您需要更正您要查找的元素的ID，因为在迭代i时您的属性名称为colors_body，因此您需要这样做。重新尝试选择$("#colors_colors_body")。

＆＃13;

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]);
            }
        }
    }

});

＆＃13;

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

＆＃13;

<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>
    				<input type="radio" name="color" value="white">
    			</span>
    		</li>
    
    		<li>
    			<span>
    				<input type="radio" name="color" value="dark">
    			</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>

＆＃13;

Answer 4

我提出的解决方案就是这个;

函数内的

obj获取无线电输入的当前值，然后根据它从对象中获取数据。

＆＃13;

$(this).val

＆＃13;

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);

});

＆＃13;

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

＆＃13;

jQuery切换更改文本输入值

4 个答案: