我应该如何编写一个javascript函数，以便我可以从链接调用它？

我正在尝试创建一个样式切换器。我想要做的是在我的页面上为每种颜色设置一些框。像下面这样：我应该如何编写一个javascript函数，以便我可以从链接调用它？

<table> 
<tr> 
<td><a href="#" Title="Style A" onclick="javascript:changeStyle("/Content/Themes-jQuery/humanity/jquery-ui-1.8.17.custom.css")>A</td> 
<td><a href="#" Title="Style B" onclick="javascript:changeStyle("/Content/Themes-jQuery/vader/jquery-ui-1.8.17.custom.css")>B</td> 
</tr> 
</table>

然后在函数中，我想这样做：

$("link[title='jquery-ui-theme']").attr("href", xxx );

其中xxx是传递给函数的参数。

有人可以给我一些建议，关于如何从<a>链接中调用函数，以及函数的定义需要如何。

也有更好的方式，我可以做到这一点使用更多的jQuery？使用DIV而不是表/行会更好吗？

来源

2012-02-14 Jessica

我觉得要避免使用的onclick。尝试将它移入你的jquery函数。 – Tallboy 2012-02-14 03:42:26

您正在使用jQuery，但添加了内联onclick属性。这可以工作，但有点矛盾。 – 2012-02-14 03:45:09

是的，有一个更好的方法可以做到这一点。例如，你可以使用这个标记：

<ul class="style-switcher"> 
    <li><a href="#" data-style="humanity">Humanity</a></li> 
    <li><a href="#" data-style="vader">Vader</a></li> 
</ul>

而且这个JavaScript：

$(".style-switcher").on('click', 'a', function(e) { 
    var style = $(this).attr('data-style'); 
    changeStyle('/Content/Themes-jQuery/' + style + '/jquery-ui-1.8.17.custom.css'); 
    e.preventDefault(); 
});

，使它看起来一样的，你可以使用这个CSS：

.style-switcher { 
    overflow: auto; 
    margin: 0; 
    padding: 0; 
} 
.style-switcher > li { 
    float: left; 
    list-style-type: none; 
    width: 10em; /* You should probably adjust this. */ 
} 
.style-switcher > li > a { 
    display: block; 
    width: 10em; /* You should probably adjust this. */ 
}

Try it上的jsfiddle。

什么可以使它更好是将href更改为某些位置，这将使禁用脚本的用户进行样式切换。

来源

2012-02-14 03:45:26 icktoofay

有一种更好的方式来做到这一点：

$('a.clickme').click(function() { 
    alert($(this).data('style')); 
});

和你链接的布局看起来像：

<a href="#" Title="Style A" class="clickme" data-style="humanity">A</a>

http://jsfiddle.net/GtcP6/

来源

2012-02-14 03:44:47 zerkms

我想如果你做到了这将是更清洁这样：

<table id="themes"> 
    <tr> 
     <td><a href="/Content/Themes-jQuery/humanity/jquery-ui-1.8.17.custom.css" Title="Style A">A</td> 
     <td><a href="/Content/Themes-jQuery/vader/jquery-ui-1.8.17.custom.css" Title="Style B" >B</td> 
    </tr> 
</table> 

<script type='text/javascript'> 
    $('#themes a').on('click', function(event){ 
     event.preventDefault(); 
     $("link[title='jquery-ui-theme']").attr("href", $(this).attr('href')); 
    }); 
</script>

来源

2012-02-14 03:44:51 Vigrond

所有的主题只有目录名称不同。在这种情况下，目录名称是人类或vader。我可能会删除对href的需求，并将Title作为关键字。我想我需要添加“/ Content/Themes-jQuery /”然后标题，然后“/jquery-ui-1.8.17.custom.css” – Jessica 2012-02-14 03:49:45

当然，你可以使用$（this）.attr（'标题'） – Vigrond 2012-02-14 03:51:41

这真的很干净吗？如果他们关闭了JavaScript，则会产生负面影响，而不会产生任何影响。 – 2012-02-14 03:54:09

当使用onlcick时，您无需说javascript: - 这仅适用于href。

否则，它应该工作。如果使用与HTML属性相同的内容，请记住要避免使用引号。

E.g.

<table> 
    <tr> 
    <td><a href="#" Title="Style A" onclick="changeStyle(\"/Content/Themes-jQuery/humanity/jquery-ui-1.8.17.custom.css\")">A</a></td> 
    <td><a href="#" Title="Style B" onclick="changeStyle(\"/Content/Themes-jQuery/vader/jquery-ui-1.8.17.custom.css\")">B</a></td> 
    </tr> 
</table>

或为简洁的外观，只使用单引号：

<table> 
    <tr> 
    <td><a href="javascript:changeStyle('/Content/Themes-jQuery/humanity/jquery-ui-1.8.17.custom.css')" Title="Style A">A</a></td> 
    <td><a href="javascript:changeStyle('/Content/Themes-jQuery/vader/jquery-ui-1.8.17.custom.css')" Title="Style B">B</a></td> 
    </tr>

或一些变体。

来源

2012-02-14 03:45:06

你可以做这样的事情：

jQuery的：

$('a').click(function(event){ 
    event.preventDefault(); 
    $("link[title='jquery-ui-theme']").attr("href", $(this).attr('rel')); 
});

HTML：

<table> 
<tr> 
<td><a href="#" Title="Style A" rel="/Content/Themes-jQuery/humanity/jquery-ui-1.8.17.custom.css">A</td> 
<td><a href="#" Title="Style B" rel="/Content/Themes-jQuery/vader/jquery-ui-1.8.17.custom.css">B</td> 
</tr> 
</table>

这消除了内联事件。此外，你的divs与表行问题似乎与你的问题的jQuery部分无关。如何布置链接取决于访问者如何使用它们。

来源

2012-02-14 03:45:16 j08691

更简单的方法...

链接二者的顶部，然后用：

<a onclick="this.className='selected1'" href="#">Test 1</a> 
<a onclick="this.className='selected2'" href="#">Test 2</a>

来源

2012-02-14 03:45:45

如果你绝对要使用onclick，至少报价正常。你在混合双引号和单引号。试试这个：

onclick="javascript:changeStyle('/Content/Themes-jQuery/humanity/jquery-ui-1.8.17.custom.css')"

一个更好的办法，但是，这是完全卸载这个jQuery的：

$('tr a.switchstyle').click(function() { 
    changeStyle('/Content/Themes-jQuery/' + $(this).attr('title') + '/jquery-ui-1.8.17.custom.css'); 
});

，并设置title属性的每一个环节：

<a href="#" title="humanity">...</a>

来源

2012-02-14 03:48:04 Blender

这里一种简单的技术&有效将来使用 -

HTML

<a href="#" class="changeTheme" rel="themeA">Swith Theme A</a> 
<p/> 
<a href="#" class="changeTheme" rel="themeB">Swith Theme B</a> 
<p/> 
<a href="#" class="changeTheme" rel="themeD">Swith Default Theme</a>

$(".changeTheme").click(function(e) { 

    e.preventDefault(); 
    $changeTo = $(this).attr("rel"); 
    switch($changeTo) 
    { 
     case 'themeA': $cssURL = "css/themeA.css"; 
         break; 
     case 'themeB': $cssURL = "css/themeB.css"; 
         break; 
     default:  $cssURL = "css/themeD.css"; 
         break; 
    } 
    $("link[title='pageTheme']").attr("href", $cssURL); 
});

来源

2012-02-14 04:22:48

我应该如何编写一个javascript函数，以便我可以从链接调用它？

回答

相关问题