代码之家 › 专栏 › 技术社区 › hmahdavi

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

html jquery

-1

hmahdavi · 技术社区 · 10 年前

我有一个数字a标签,当我点击这个a标签时,我想要它运行一个函数并更改元素的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>

5 回复 | 直到 10 年前

Satpal 10 年前

使用 .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”,处理程序)的快捷方式

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>

Joydeep 10 年前

试试这个:

$(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');

}); });

Hemal 10 年前

你可以使用 .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');
});

Yogesh Sharma 10 年前

检查以下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>

hmahdavi 10 年前

最佳答案:

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不是函数