Question

我有一个数字标签我想要点击这个标签运行一个函数并更改一个元素的href属性。我写了这些代码但是在点击a标签时会出错。

var colors = $('#colour-variations ul li a');
colors.each.onclick(function() {
    var dataTem;
    dataTem = this.attribute('data-theme');
    $('#color_skin').href('/DNN_test/Portals/_default/Skins/Crew/css/' + dataTem + '.css');
});

如何更改我的jquery代码来解决它？

<div id="colour-variations">
        <a class="option-toggle"><i class="icon-gear"></i></a>
        <h3>Preset Colors</h3>
        <ul>
            <li><a href="javascript: void(0);" data-theme="style"></a></li>
            <li><a href="javascript: void(0);" data-theme="pink"></a></li>
            <li><a href="javascript: void(0);" data-theme="blue"></a></li>
            <li><a href="javascript: void(0);" data-theme="turquoise"></a></li>
            <li><a href="javascript: void(0);" data-theme="orange"></a></li>
            <li><a href="javascript: void(0);" data-theme="lightblue"></a></li>
            <li><a href="javascript: void(0);" data-theme="brown"></a></li>
            <li><a href="javascript: void(0);" data-theme="green"></a></li>
        </ul>
    </div>

Answer 1

试试这个：

$(document).ready(function(){
  var colors = $('#colour-variations ul li a');

 colors.on('click', function(index, item) {     
  var dataTem;
 dataTem = $(this).attr('data-theme');

 $('#color_skin').attr('href', '/DNN_test/Portals/_default/Skins/Crew/css/' + dataTem + '.css');

}）; }）;

Answer 2

使用.on()来绑定事件，你也不需要迭代绑定点击处理程序jQuery为你做了。

var colors = $('#colour-variations ul li a');
colors.on('click', function() {
    var dataTem = $(this).data('theme');
    $('#color_skin').href('/DNN_test/Portals/_default/Skins/Crew/css/' + dataTem + '.css');
});

也可以使用.click()

此方法是.on（“click”，handler）
的快捷方式

var colors = $('#colour-variations ul li a');
colors.on('click', function(event) {
  var dataTem = $(this).data('theme');
  alert(dataTem)
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colour-variations">
  <a class="option-toggle"><i class="icon-gear"></i></a>
  <h3>Preset Colors</h3>
  <ul>
    <li>
      <a href="javascript: void(0);" data-theme="style">style</a>
    </li>
    <li>
      <a href="javascript: void(0);" data-theme="pink">pink</a>
    </li>
    <li>
      <a href="javascript: void(0);" data-theme="red">red</a>
    </li>
    <li>
      <a href="javascript: void(0);" data-theme="turquoise">turquoise</a>
    </li>
    <li>
      <a href="javascript: void(0);" data-theme="orange">orange</a>
    </li>
    <li>
      <a href="javascript: void(0);" data-theme="lightblue">lightblue</a>
    </li>
    <li>
      <a href="javascript: void(0);" data-theme="brown">brown</a>
    </li>
    <li>
      <a href="javascript: void(0);" data-theme="green"></a>
    </li>
  </ul>
</div>

Answer 3

您可以使用.click()

var colors = $('#colour-variations ul li a');
colors.click(function() {
    var dataTem;
    dataTem = this.attribute('data-theme');
    $('#color_skin').href('/DNN_test/Portals/_default/Skins/Crew/css/' + dataTem + '.css');
});

Answer 4

检查以下JS -

$('#colour-variations ul li a').click(function(){
 var dataTem;
    dataTem = $(this).attr('data-theme');
alert(dataTem);
  $('#color_skin').href('/DNN_test/Portals/_default/Skins/Crew/css/' + dataTem + '.css');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colour-variations">
        <a class="option-toggle"><i class="icon-gear"></i></a>
        <h3>Preset Colors</h3>
        <ul>
            <li><a href="javascript: void(0);" data-theme="style">rr</a></li>
            <li><a href="javascript: void(0);" data-theme="pink">ff</a></li>
            <li><a href="javascript: void(0);" data-theme="blue">ff</a></li>
            <li><a href="javascript: void(0);" data-theme="turquoise"d></a></li>
            <li><a href="javascript: void(0);" data-theme="orange">sf</a></li>
            <li><a href="javascript: void(0);" data-theme="lightblue">sdf</a></li>
            <li><a href="javascript: void(0);" data-theme="brown">sdf</a></li>
            <li><a href="javascript: void(0);" data-theme="green">sf</a></li>
        </ul>
    </div>

Answer 5

最佳答案：

var colors = $('#colour-variations ul li a');
colors.on('click', function () {
    var dataTem = $(this).data('theme');
    $('#color_skin').attr('href','/DNN_test/Portals/_default/Skins/Crew/css/' + dataTem + '.css');
});

href不是功能

如何编写一个适用于数字元素的函数？

5 个答案: