1

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

有没有办法让它工作？它可以节省我编写数百个切换函数的时间！

任何帮助都会很棒，谢谢

4

7 回答 7

5

你的意思是这样的吗？

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

演示：http: //jsfiddle.net/kbQXd/

于 2012-09-05T11:58:45.123 回答
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-*属性来设置所需的选择器

于 2012-09-05T12:03:40.503 回答
1

将您的功能更改为此

function boldToggler(itemid){
$('#' + itemid).toggle(function(){
    $('#' + itemid).css("font-weight","bold");},
function(){
    $('#' + itemid).css("font-weight","normal");});
}
于 2012-09-05T12:00:14.913 回答
1

我很想稍微改变你的标记，让它更像 jQuery 风格：

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

于 2012-09-05T12:05:32.127 回答
0

你错过了'#'：

$('#'+itemid).css....
于 2012-09-05T11:58:03.440 回答
0

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

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

您只需要定义类：

.bold { font-weight: bold; }
于 2012-09-05T11:59:12.190 回答
0 
function boldToggler(itemid){
    if($('#'+itemid).css("font-weight") == "normal"){
        $('#'+itemid).css("font-weight",'bold');
    }else{
        $('#'+itemid).css("font-weight",'normal');
    }
}
于 2012-09-05T11:59:54.763 回答