Question

我是javascript的新手。我想用havascript在html中创建一个按钮。当用户尝试按下按钮时特定的＆lt; #id＆gt;将是“大胆”并再次按“Unbold”。

我该怎么做？请参考任何帮助材料。谢谢！

Answer 1

我猜，你正在尝试构建像RTE这样的东西，因此，应用类来提供大胆的效果将是更好，更有效的解决方案。

可以像这样简单地完成

$(".boldtrigger").click(function() { //boldTrigger being the element initiating the trigger
    $(".text").toggleClass("bold");  //text being the element to where applied to it.
});

CSS

.bold { font-weight: bold; }

Demo

Answer 2

由于学习经验至关重要，特别是对于Javascript，我会引导您朝着正确的方向前进。

首先，您应该使用jQuery查看event binding和mouse event handling。你可以用这些知识做一些有用的东西，包括你想做的事情。

其次，研究基本的jQuery selectors。您可以使用简单的基于CSS的选择器来选择所需的id并不难。

第三，看看jQuery的css()函数，它属于jQuery的CSS类别。您可以使用它来设置元素的不同属性，包括字体粗细。

Answer 3

这是另一个使用.toggleClass反之亦然的问题。你需要为那个元素创建一个类，因为它会来回添加和切换类。

Using JQuery to toggle between styles

进行单向更改：

$('button_selector').on('click',function(){
    $('item_to_bold_selector').css('font-weight','bold');
});

对此的参考：

selectors
.on用于事件处理
.css用于随时添加样式

Answer 4

JQuery的toggle()方法应该解决这个问题。

$('#foo').toggle(function() {
    $('#bar').css('font-weight', 'bold');
}, function() {
    $('#bar').css('font-weight', 'auto');
});

单击#foo时，它将按顺序执行下一个功能，因此这正是您想要的。

Answer 5

这里是粗体和代码的代码。 unbold text

  <div id="contentDiv">

  content of the page.

  </div>
 <input type="button" value="Bold" id="font-button"></input>

jQuery("#font-button").on("click",function(){

   var button = $(this);
   var contentDiv= $("#contentDiv");

  if(button.val() == "Bold"){

    contentDiv.css("font-weight","bold");
    button.val("UnBold");

  }else{

      contentDiv.css("font-weight","normal");
       button.val("Bold");
 }
});

DEMO

Answer 6

$('button_selector').on('click',function(){
  var itemToBold = $('item_to_bold_selector');
  if (itemToBold.css('font-weight') == 'bold') {
    $('item_to_bold_selector').css('font-weight','normal');
  } else {
    $('item_to_bold_selector').css('font-weight','bold');
  }
});

基于约瑟夫的答案，但是没有取消标准。

Answer 7

由于您使用jQuery标记了这篇文章，我假设您正在寻找一种jQuery方法。

如果您想使用CSS类添加粗体样式，我建议您使用toggleClass：http://api.jquery.com/toggleClass/

该页面上的大量样本......

Answer 8

我喜欢使用toggleClass()（API reference）

$("#button").click(function(){
  $("#element").toggleClass("bold");
});

如果单击时显示“.bold”，则会解开，反之亦然。

按下按钮“Bold”＆amp;再次按“Unbold”

8 个答案:

Demo