使用jquery动态切换功能?

时间:2012-09-05 11:55:22

标签: jquery

我正在尝试使用jQuery创建一个灵活的切换功能,我将要切换的项目的ID作为参数。该函数由一个链接触发,该链接将正确的ID传递给函数。

此处是目前的代码:

function boldToggler(itemid){
$(itemid).toggle(function(){
    $(itemid).css("font-weight","bold");},
function(){
    $(itemid).css("font-weight","normal");});
}

由以下链接触发:

<a href="javascript: boldToggler('h1')">toggle style for this item</a>
<a href="javascript: boldToggler('h2')">toggle style for this item</a>

有没有办法让这个工作?它可以节省我写出数百个切换功能!

任何帮助都会很棒,谢谢

7 个答案:

答案 0 :(得分:5)

你的意思是什么?

function boldToggler(itemid) {
    $(itemid).css("font-weight", function(i, val) {
        return val == "bold" ? "normal" : "bold";
    });
}

DEMO: http://jsfiddle.net/kbQXd/

答案 1 :(得分:2)

也许这个替代代码可能有用 - 小提琴:http://jsfiddle.net/9zxbT/

HTML

<a href="#" data-toggle="h1">toggle style for H1</a>
<a href="#" data-toggle="h2">toggle style for H2</a>

<h1>this is H1</h1>
<h2>this is H2</h2>

CSS

.bold { font-weight: bold; }

的jQuery

$('a[data-toggle]').on('click', function(evt) {
    evt.preventDefault();
    $($(this).data('toggle')).toggleClass('bold');
});

这会完全删除您的内联处理程序,执行更好的javascript和CSS分离,并使用data-*属性来设置所需的选择器

答案 2 :(得分:1)

将您的功能更改为此

function boldToggler(itemid){
$('#' + itemid).toggle(function(){
    $('#' + itemid).css("font-weight","bold");},
function(){
    $('#' + itemid).css("font-weight","normal");});
}

答案 3 :(得分:1)

我很想改变你的标记,使其更加jQuery-ish:

<a href="#" class="boldToggler" data-selector="h1">toggle style for h1</a>
<a href="#" class="boldToggler" data-selector="h2">toggle style for h2</a>

然后使用如下方法:

$('.boldToggler').click(function(){
    var itemSelector = $(this).data('selector');
    $(itemSelector).toggleClass('bold');
});

将css类定义为:

.bold{
 font-weight:bold;  
}

实例:http://jsfiddle.net/NTSzs/

答案 4 :(得分:0)

您错过了&#39;#&#39;:

$('#'+itemid).css....

答案 5 :(得分:0)

您可以在jQuery中使用toggleClass方法。

<a href="javascript: $('h2').toggleClass(bold);">toggle style for this item</a>

您只需要定义类:

.bold { font-weight: bold; }

答案 6 :(得分:0)

function boldToggler(itemid){
    if($('#'+itemid).css("font-weight") == "normal"){
        $('#'+itemid).css("font-weight",'bold');
    }else{
        $('#'+itemid).css("font-weight",'normal');
    }
}