Question

我正在尝试使用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>

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

任何帮助都会很棒，谢谢

Answer 1

你的意思是什么？

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

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

Answer 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-*属性来设置所需的选择器

Answer 3

将您的功能更改为此

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

Answer 4

我很想改变你的标记，使其更加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/

Answer 5

您错过了＆＃39;＃＆＃39;：

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

Answer 6

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

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

您只需要定义类：

.bold { font-weight: bold; }

Answer 7

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

使用jquery动态切换功能？

7 个答案: