Question

我写了一个jQuery，当点击它时，将按钮颜色更改为红色。但这只适用于第一个面板，但不适用于其他面板。在第一组按钮中，它可以工作，但不仅适用于所有事情。这是jQuery的一部分。

function DurationOnClick(element){
    var buttonId = element.id;
    var buttonName = element.name;
    var buttonIds = ["1Hour", "30Min", "1Day" , "1Week", "1Month"];
    var chartType = $('#chartType').val();
    var idValue = $('#IdValue').val();        

    //after user click the option here we are changing the option black to red.
    $(buttonIds).each(function(i, e) {

      $('#'+e+'[name='+buttonName+']').css("color", "");      
    });

    $('#'+buttonId+'[name='+buttonName+']').css("color", "Blue");         `

html代码是这样的：

<div class="row">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
            </div>
            <div class="panel-body">
                <button class="btn btn-default btn-xs" name="MemoryConsumption" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
                <button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
                <button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
                <button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
                <button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
                <div class="container content" style="width: 600px;">
                    <div class="row text-center" id="chart3">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title" style="color:Black">Load Average</h3>
            </div>
            <div class="panel-body">
                <button class="btn btn-default btn-xs" name="LoadAverage" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
                <button class="btn btn-default btn-xs" name="LoadAverage" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
                <button class="btn btn-default btn-xs" name="LoadAverage" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
                <button class="btn btn-default btn-xs" name="LoadAverage" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
                <button class="btn btn-default btn-xs" name="LoadAverage" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
                <div class="container content" style="width: 600px;">                        
                    <div class="row text-center" id="chart2">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

删除第一个面板后，下一个直接图表会发生颜色变化，但下面的图表不会发生颜色变化。任何帮助找出问题都将非常感激。

Answer 1

正如已经解释的那样，问题是你有重复的ID，id-selector将只选择带有id的第一个元素，所以你的代码将始终选择第一组元素。

但更多jQuery-ish解决方案将使用jQuery事件处理程序和类（duration）来对它们进行分组，如

$('button.duration').click(function() {
  $(this).addClass('selected').siblings('.selected').removeClass('selected');
})

.btn.btn-default.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>

<div class="row">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
      </div>
      <div class="panel-body">
        <button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="30Min">30 mins</button>
        <button class="btn btn-default btn-xs duration selected" name="MemoryConsumption" data-id="1Hour">1 hour</button>
        <button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Day">1 day</button>
        <button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Week">1 week</button>
        <button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Month">1 month</button>
        <div class="container content" style="width: 600px;">
          <div class="row text-center" id="chart3">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title" style="color:Black">Load Average</h3>
      </div>
      <div class="panel-body">
        <button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="30Min">30 mins</button>
        <button class="btn btn-default btn-xs duration selected" name="LoadAverage" data-id="1Hour">1 hour</button>
        <button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Day">1 day</button>
        <button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Week">1 week</button>
        <button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Month">1 month</button>
        <div class="container content" style="width: 600px;">
          <div class="row text-center" id="chart2">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

请使用以下代码。这将完美适用于您的情况： -

 function DurationOnClick(ref) {

    var buttonName = $(ref).attr("name");

    $("button[name=" + buttonName + "]").each(function () {
        $(this).css("color", "");
    });

    $(ref).css("color", "Blue");
   }

Answer 3

您不应在HTML表单中包含重复的ID。请考虑仅使用第一组ID。

Answer 4

您有重复的ID。你的代码还可以，但你做错了。

id属性被视为唯一。

class属性被视为多重。

你已经放了几个相同的id，但是CSS和JS只看一个，所以他们处理第一个（仅）并离开。

将id更改为class。示例： class="30mins" 将转换red所有＆＃34; 30分钟＆＃34;的按钮。

为每个想要在点击时变为红色的群组执行此操作。

Answer 5

显然你不能将数字作为你的css申请的ID或类的第一个字符。如果您正在为30min 1hour等应用样式，则应考虑重命名它们。我不确定这是否与JS有冲突。见这个例子：

<div class="char">char</div>
<div class="char1">char1</div>
<div class="1char">1char</div>
<div class="1111">1111</div>

<强> JSFiddle

css仅附加到第一个面板

5 个答案: