我應該如何編寫一個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函數，以便我可以從鏈接調用它？

回答

相關問題