Jquery 我应该如何编写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>

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

有没有人能给我一些建议，告诉我如何从

链接内部调用函数，以及函数的定义应该是什么样的

---

还有没有更好的方法可以使用更多jQuery来实现这一点？使用div而不是表/行是否更好？

有一种更好的方法：

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

您的链接布局如下所示：

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

---

我想如果你这样做会更干净：

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

A.
B
$（“#主题a”）。在（'click'，函数（事件）{
event.preventDefault（）；
$（“link[title='jquery-ui-theme']）attr（'href'，$（this.attr（'href'））；
});

当使用

onlcick

时，您不需要说

javascript:

-这仅用于

href

否则，它应该会起作用。如果使用与html属性相同的引号，请记住转义引号

例如

或者，为了更简洁，只需使用单引号：

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

或其一些变体。

---

您可以这样做：

jQuery：

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

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

HTML：

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

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

A.
B

---

这将删除内联事件。此外，divs vs table rows问题似乎与问题的jQuery部分无关。如何布局链接更多地取决于访问者如何使用链接。

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

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

要使其看起来相同，可以使用以下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. */
}

在JSFIDLE上。

---

更好的方法是将

href

更改到某个位置，使禁用脚本的用户可以进行样式切换。

更简单的方法

在顶部链接这两个选项，然后使用：

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

如果您确实想使用

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>

---

以下是一种简单的技术，可供将来使用-

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>

---

我想你应该避免使用onclick。尝试将其移动到jquery函数中。您正在使用jquery，但随后添加了内联onclick属性。这是可行的，但有点矛盾。所有的主题都不同，只是目录名不同。在本例中，目录名为humanity或vader。我是否可以删除对href的需要，只使用标题作为键。我想我需要添加“/Content/Themes jQuery/”然后添加标题，然后添加“/jQuery-ui-1.8.17.custom.css”当然，您可以使用$（this.attr（'title'），这真的更干净吗？如果他们关闭了JavaScript，这将产生负面影响，而不是没有影响。如果他们关闭了JavaScript，他们仍然可以访问CSS表。我不认为这是否定的

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