Fatal编程技术网
  • javascript/
  • Javascript jQuery:toggleClass，多个<；td>-元素，只有一个高亮显示

Javascript jQuery:toggleClass，多个<；td>-元素，只有一个高亮显示

javascript jquery button

Javascript jQuery:toggleClass，多个<；td>-元素，只有一个高亮显示,javascript,jquery,button,onclick,toggleclass,Javascript,Jquery,Button,Onclick,Toggleclass,HTML <table cellpadding=10> <tr> <td id="g1" class="tdback">test 1</td> <td> <button onclick="clickHighlightTd(g1);">click</button> </td> </tr> <tr> <td id="g2

HTML

<table cellpadding=10>
  <tr>
    <td id="g1" class="tdback">test 1</td>
    <td>
      <button onclick="clickHighlightTd(g1);">click</button>
    </td>
  </tr>
  <tr>
    <td id="g2" class="tdback">test 2</td>
    <td>
      <button onclick="clickHighlightTd(g2);">click</button>
    </td>
  </tr>
  <tr>
    <td id="g3" class="tdback">test 3</td>
    <td>
      <button onclick="clickHighlightTd(g3);">click</button>
    </td>
  </tr>
  <tr>
    <td id="g4" class="tdback">test 4</td>
    <td>
      <button onclick="clickHighlightTd(g4);">click</button>
    </td>
  </tr>
</table>
JS

.tdback {
  background-color: #ffffff;
}

.tdhighlight {
  background-color: #999999;
}

function clickHighlightTd(str) {
  $(str).toggleClass('tdhighlight');
}
我想单击一个按钮，同一行中的td应该将类切换到“.tdhighlight”，当单击任何其他按钮时，前面的（或所有其他td）应该得到标准类（“.tdback”），这一行中的td应该得到突出显示

这是一个JSFiddle。不幸的是，代码在我的站点上运行，但在JSFiddle中不起作用。也许我错过了什么

谢谢你的帮助

你就快到了：

function clickHighlightTd(str) {
  // remove class from all TD elements
  $("td").removeClass('tdhighlight');
  // your choice: use addClass/toggleClass as you prefer
  $(str).addClass('tdhighlight');
}
更新小提琴：

顺便说一句，TDs从不“丢失”类
tdback
——另外添加了另一个类
tdhighlight
（这意味着TDs同时拥有两个类），当
tdhighlight
被删除时，它们仍然拥有
tdback
您就快到了：


function clickHighlightTd(str) {
  // remove class from all TD elements
  $("td").removeClass('tdhighlight');
  // your choice: use addClass/toggleClass as you prefer
  $(str).addClass('tdhighlight');
}


更新小提琴：

顺便说一句，TDs从不“丢失”类
tdback
——另外添加另一个类
tdhighlight
（这意味着TDs同时具有两个类），并且当
tdhighlight
被删除时，他们仍然有
tdback
选择器名称之前需要#，您必须首先从所有td中删除该类


function clickHighlightTd(str) {
  $("td").removeClass('tdhighlight');
  $("#"+str).addClass('tdhighlight');
}


或者，删除onclick属性并使用下面的代码


$(document).ready(function(){
    $("button").click(function(){
      $("td").removeClass('tdhighlight');
      $(this).parent().find("td").addClass("tdhighlight");
    }); 
});


在选择器名称之前需要#，并且必须首先从所有td中删除该类


function clickHighlightTd(str) {
  $("td").removeClass('tdhighlight');
  $("#"+str).addClass('tdhighlight');
}


或者，删除onclick属性并使用下面的代码


$(document).ready(function(){
    $("button").click(function(){
      $("td").removeClass('tdhighlight');
      $(this).parent().find("td").addClass("tdhighlight");
    }); 
});



如果你不介意的话，我修改了代码，这样我就可以让它工作了，但它在这里：

HTML:


<table cellpadding=10>
  <tr>
    <td class="g1">test 1</td>
    <td>
      <button class="B1">click</button>
    </td>
  </tr>
  <tr>
    <td class="g2">test 2</td>
    <td>
      <button class="B2">click</button>
    </td>
  </tr>
  <tr>
    <td class="g3">test 3</td>
    <td>
      <button class="B3">click</button>
    </td>
  </tr>
  <tr>
    <td class="g4">test 4</td>
    <td>
      <button Class="B4">click</button>
    </td>
  </tr>
</table>



.g1{
  background-color: #ffffff;
}
.g2{
  background-color: #ffffff;
}
.g3{
  background-color: #ffffff;
}
.g4{
  background-color: #ffffff;
}
.tdhighlight{
  background-color:#999999;
}



$(document).ready(function(){
    $('.B1').click(function(){
     $('.g1').toggleClass('tdhighlight');
   $('.g2').removeClass('tdhighlight')
   $('.g3').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B2').click(function(){
     $('.g2').toggleClass('tdhighlight');
     $('.g1').removeClass('tdhighlight')
   $('.g3').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B3').click(function(){
     $('.g3').toggleClass('tdhighlight');
   $('.g1').removeClass('tdhighlight')
   $('.g2').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B4').click(function(){
     $('.g4').toggleClass('tdhighlight');
   $('.g1').removeClass('tdhighlight');
   $('.g2').removeClass('tdhighlight');
   $('.g3').removeClass('tdhighlight');
  });
});


JS/JQUERY:


<table cellpadding=10>
  <tr>
    <td class="g1">test 1</td>
    <td>
      <button class="B1">click</button>
    </td>
  </tr>
  <tr>
    <td class="g2">test 2</td>
    <td>
      <button class="B2">click</button>
    </td>
  </tr>
  <tr>
    <td class="g3">test 3</td>
    <td>
      <button class="B3">click</button>
    </td>
  </tr>
  <tr>
    <td class="g4">test 4</td>
    <td>
      <button Class="B4">click</button>
    </td>
  </tr>
</table>



.g1{
  background-color: #ffffff;
}
.g2{
  background-color: #ffffff;
}
.g3{
  background-color: #ffffff;
}
.g4{
  background-color: #ffffff;
}
.tdhighlight{
  background-color:#999999;
}



$(document).ready(function(){
    $('.B1').click(function(){
     $('.g1').toggleClass('tdhighlight');
   $('.g2').removeClass('tdhighlight')
   $('.g3').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B2').click(function(){
     $('.g2').toggleClass('tdhighlight');
     $('.g1').removeClass('tdhighlight')
   $('.g3').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B3').click(function(){
     $('.g3').toggleClass('tdhighlight');
   $('.g1').removeClass('tdhighlight')
   $('.g2').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B4').click(function(){
     $('.g4').toggleClass('tdhighlight');
   $('.g1').removeClass('tdhighlight');
   $('.g2').removeClass('tdhighlight');
   $('.g3').removeClass('tdhighlight');
  });
});



注意：可能还有另一种更简单的方法可以让它工作，但考虑到我在JS/JQUERY方面的技能和知识，我发现了这种方法可以让它工作。我希望这能有所帮助：）
如果您不介意的话，我已经修复了代码，这样我就可以让它工作了，但它在这里：

HTML:


<table cellpadding=10>
  <tr>
    <td class="g1">test 1</td>
    <td>
      <button class="B1">click</button>
    </td>
  </tr>
  <tr>
    <td class="g2">test 2</td>
    <td>
      <button class="B2">click</button>
    </td>
  </tr>
  <tr>
    <td class="g3">test 3</td>
    <td>
      <button class="B3">click</button>
    </td>
  </tr>
  <tr>
    <td class="g4">test 4</td>
    <td>
      <button Class="B4">click</button>
    </td>
  </tr>
</table>



.g1{
  background-color: #ffffff;
}
.g2{
  background-color: #ffffff;
}
.g3{
  background-color: #ffffff;
}
.g4{
  background-color: #ffffff;
}
.tdhighlight{
  background-color:#999999;
}



$(document).ready(function(){
    $('.B1').click(function(){
     $('.g1').toggleClass('tdhighlight');
   $('.g2').removeClass('tdhighlight')
   $('.g3').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B2').click(function(){
     $('.g2').toggleClass('tdhighlight');
     $('.g1').removeClass('tdhighlight')
   $('.g3').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B3').click(function(){
     $('.g3').toggleClass('tdhighlight');
   $('.g1').removeClass('tdhighlight')
   $('.g2').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B4').click(function(){
     $('.g4').toggleClass('tdhighlight');
   $('.g1').removeClass('tdhighlight');
   $('.g2').removeClass('tdhighlight');
   $('.g3').removeClass('tdhighlight');
  });
});


JS/JQUERY:


<table cellpadding=10>
  <tr>
    <td class="g1">test 1</td>
    <td>
      <button class="B1">click</button>
    </td>
  </tr>
  <tr>
    <td class="g2">test 2</td>
    <td>
      <button class="B2">click</button>
    </td>
  </tr>
  <tr>
    <td class="g3">test 3</td>
    <td>
      <button class="B3">click</button>
    </td>
  </tr>
  <tr>
    <td class="g4">test 4</td>
    <td>
      <button Class="B4">click</button>
    </td>
  </tr>
</table>



.g1{
  background-color: #ffffff;
}
.g2{
  background-color: #ffffff;
}
.g3{
  background-color: #ffffff;
}
.g4{
  background-color: #ffffff;
}
.tdhighlight{
  background-color:#999999;
}



$(document).ready(function(){
    $('.B1').click(function(){
     $('.g1').toggleClass('tdhighlight');
   $('.g2').removeClass('tdhighlight')
   $('.g3').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B2').click(function(){
     $('.g2').toggleClass('tdhighlight');
     $('.g1').removeClass('tdhighlight')
   $('.g3').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B3').click(function(){
     $('.g3').toggleClass('tdhighlight');
   $('.g1').removeClass('tdhighlight')
   $('.g2').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B4').click(function(){
     $('.g4').toggleClass('tdhighlight');
   $('.g1').removeClass('tdhighlight');
   $('.g2').removeClass('tdhighlight');
   $('.g3').removeClass('tdhighlight');
  });
});



注意：可能还有另一种更简单的方法可以让它工作，但考虑到我在JS/JQUERY方面的技能和知识，我发现了这种方法可以让它工作。我希望这有帮助：）解决方案终于出现了：https://jsfiddle.net/h11pqubz/8/
解决方案终于出现了：https://jsfiddle.net/h11pqubz/8/
$（str）不会工作，除非用“#g4”之类的变量调用函数。你是对的，它不应该工作，但我没有注意到，因为它在fiddle.Hm中工作，对于
$（“#”+str）
要工作，您必须调用
onclick=“clickHighlightTd（'g1'）；”
（注意单引号）。我必须承认，我不完全确定浏览器如何处理
g1
w/o引号，但它似乎传递了整个元素，而不仅仅是一个字符串。我认为这是JSFIDLE在缺少jQuery时使用的js脚本的结果。我在JSFIDLE控制台（主包装器的id HW_frame_cont）中输入了$（“#HW_frame_cont”），它返回null，而$（#HW_frame_cont”）返回目标元素。如果要为多个元素分配相同的属性值，然后您应该使用id的类istead。id用于唯一选择器，并且只会匹配您遇到的第一个选择器。$（str）不会工作，除非使用诸如“#g4”之类的变量调用函数。您是对的，它不应该工作，但我没有注意到，因为它在fiddle.Hm中工作，
$（“#”+str）
才能工作，您必须调用
onclick=“clickHighlightTd（'g1'）；”
（注意单引号）。我必须承认，我不完全确定浏览器如何处理
g1
w/o引号，但它似乎传递了整个元素，而不仅仅是一个字符串。我认为这是JSFIDLE在缺少jQuery时使用的js脚本的结果。我在JSFIDLE控制台（主包装器的id HW_frame_cont）中输入了$（“#HW_frame_cont”），它返回null，而$（#HW_frame_cont”）返回目标元素。如果要为多个元素分配相同的属性值，然后您应该使用id的类istead。id用于唯一选择器，并且只匹配您遇到的第一个选择器。顺便说一句，您的onclick函数没有在JSFIDLE中运行的原因是JSFIDLE使用iframe和加载处理程序的方式。要使onclick函数在JSFiddle作用域中运行，请将其发送到窗口（不要使用
var
）：
clickHighlightTd=function（str）{$（str）.toggleClass（'tdhighlight'）；}
。要使onclick函数在JSFiddle作用域中运行，请将其发送到窗口（不要使用
var
）：
clickHighlightTd=function（str）{$（str）。toggleClass（'tdhighlight'）；}