jQuery onclick 设置 css 无效

Question

这是我的代码

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

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

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

功能设置值工作，悬停工作但我选择的 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>

jQuery onclick 设置 css 无效

jQuery onclick set css didn't work

html

javascript

css

jquery

onclick