jQuery onclick设置css没有用

Question

这是我的代码

＆＃13;

＆＃13;

<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
	function skinchange(link){
		document.getElementById('inputtest').value = link;
	}
</script>
<script type="text/javascript">
	$(function() {
		$('.imgstyles').click(function() {
			$('.imgstyles').removeClass('selected');
		    $(this).addClass('selected')
		});
	});
</script>

＆＃13;

		.selected {
			border: 10px solid #7EBEFC;
		}
		a:hover img.imgstyles {
		    border: 3px solid #7EBEFC;
		    opacity:0.15;
		}
		a:hover div.textcss {
			display: block;
		}
		a img.imgstyles {
			border: 2px solid #ffffff;
		}
		.textcss {
			display: none;
			margin-top: -147px;
		 	font-size: 50px;
		 	font-weight: bold;
			margin-right: 20px;
		 	color: #7EBEFC;
		 	text-align: center;
		}

＆＃13;

<input type="text" name="inputtest" id="inputtest"/>
<a onclick="skinchange('https://wp-test-hoangxanh.c9.io/wp-content/plugins/hEmbed/skins/gred.xml')"><img class="imgstyles" src="https://wp-test-hoangxanh.c9.io/wp-content/plugins/hEmbed/skins/images/gred.jpg" width="95%" height="60%"><div class="textcss">Gred</div></a>

＆＃13;

＆＃13;

＆＃13; 功能设定值工作，悬停工作，但我选择的CSS没有，有人帮助我！

Answer 1

问题是css specificity。

由.selected设置的边框规则会被更具体的规则a img.selected覆盖。

因此解决方案是创建一个更具体的规则，如img.imgstyles.selected

function skinchange(link) {
  document.getElementById('inputtest').value = link;
}
$(function() {
  $('.imgstyles').click(function() {
    $('.imgstyles').removeClass('selected');
    $(this).addClass('selected')
  });
});

.selected, img.imgstyles.selected {
  border: 10px solid #7EBEFC;
}
a:hover img.imgstyles {
  border: 3px solid #7EBEFC;
  opacity: 0.15;
}
a:hover div.textcss {
  display: block;
}
a img.imgstyles {
  border: 2px solid #ffffff;
}
.textcss {
  display: none;
  margin-top: -147px;
  font-size: 50px;
  font-weight: bold;
  margin-right: 20px;
  color: #7EBEFC;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<input type="text" name="inputtest" id="inputtest" />
<a onclick="skinchange('https://wp-test-hoangxanh.c9.io/wp-content/plugins/hEmbed/skins/gred.xml')">
  <img class="imgstyles" src="https://wp-test-hoangxanh.c9.io/wp-content/plugins/hEmbed/skins/images/gred.jpg" width="95%" height="60%">
  <div class="textcss">Gred</div>
</a>