Question

我正在尝试创建一个样式切换器。我想做的是在我的页面上为每种颜色设置一些框。如下所示：

<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而不是表/行会更好吗？

Answer 1

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

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

Answer 2

有一种更好的方法：

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

您的链接布局如下：

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

http://jsfiddle.net/GtcP6/

Answer 3

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

或其一些变化。

Answer 4

你可以这样做：

<强>的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部分无关。如何布置链接取决于访问者如何使用它们。

Answer 5

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

<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. */
}

JSFiddle上的

Try it。

更好的做法是将href更改为某个位置，以便在禁用脚本的情况下为用户进行样式切换。

Answer 6

如果您绝对希望使用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>

Answer 7

更简单的方法......

在顶部链接它们，然后使用：

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

Answer 8

这是一个简单的技术＆amp;有效用于将来使用 -

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

<强> JS

$(".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);
});

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

8 个答案: