Question

$("#Mpanel").on('click', '.ulmenu li', function() {

  var AppointType = $(this).text();

  if (AppointType == "R") {
    $("#spCsCharge").text("500 Rs");
    $(this).siblings(".Sappo").toggleClass();
    $(this).toggleClass("Sappo");
  } else if (AppointType == "T") {
    $("#spCsCharge").text("1000 Rs");
    $(this).siblings(".Sappo").toggleClass();
    $(this).toggleClass("Sappo Tappo");

  }

});

.ulmenu li a {
  float: left;
  text-decoration: none;
  color: white;
  padding: 11.5px 16px;
  background-color: #808080;
  border: 1px solid #fff;
}
.ulmenu li.Tappo a {
  background-color: #F39090;
}
.ulmenu li.Sappo a {
  background-color: green;
}
.ulmenu li.ABappo a {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Mpanel" class="menu_simple">
  <ul class="ulmenu">
    <li><a href="#">R</a>
    </li>
    <li class="ABappo"><a href="#" style="pointer-events: none; cursor: none">X</a>
    </li>
    <li><a href="#">R</a>
    </li>
    <li><a href="#">R</a>
    </li>
    <li class="Tappo"><a href="#">T</a>
    </li>
    <li class="Tappo"><a href="#">T</a>
    </li>
  </ul>
</div>

约束是 一次只选一个。

这是预约申请。我有问题，当我选择任何“R”（常规）li时这很好用。但对于“T”（for-tatkal），它会产生问题。取消选择选择的li“T”类“.Tappo”后不能应用。看起来只是默认的李。

此代码需要进行哪些更改？我不知道。请告诉我。

Answer 1

您需要获取a而不是.li的文字。

将var AppointType = $(this).text();更改为var AppointType = $(this).find('a').text();

＆＃13;

$(function() {
  $("#Mpanel").on('click', '.ulmenu li', function() {

    var AppointType = $(this).find('a').text();

    if (AppointType == "R") {
      $("#spCsCharge").text("500 Rs");
      $(this).toggleClass("Sappo");
    } else if (AppointType == "T") {
      $("#spCsCharge").text("1000 Rs");
      $(this).toggleClass("Sappo");
    }
  });
});

＆＃13;

.ulmenu li a {
  float: left;
  text-decoration: none;
  color: white;
  padding: 11.5px 16px;
  background-color: #808080;
  border: 1px solid #fff;
}
.ulmenu li.Tappo a {
  background-color: #F39090;
}
.ulmenu li.Sappo a {
  background-color: green;
}
.ulmenu li.ABappo a {
  background-color: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Mpanel" class="menu_simple">
  <ul class="ulmenu">
    <li><a href="#">R</a>
    </li>
    <li class="ABappo"><a href="#" style="pointer-events: none; cursor: none">X</a>
    </li>
    <li><a href="#">R</a>
    </li>
    <li><a href="#">R</a>
    </li>
    <li class="Tappo"><a href="#">T</a>
    </li>
    <li class="Tappo"><a href="#">T</a>
    </li>
  </ul>
</div>
<div id="spCsCharge" style="clear:both;"></div>

＆＃13;

Answer 2

问题出在这一行：$(this).siblings(".Sappo").toggleClass();。你在这里做的是这样的：找一个Sappo - 类的兄弟，并切换所有类。这不是您想要的，因为它还会删除Tappo和ABappo类。

在我的示例中，我使用$(this).siblings().removeClass(".Sappo");。这意味着：获取每个兄弟，并删除它活跃的班级Sappo。这是我的优化版本：

$("#Mpanel").on('click', '.ulmenu li', function() {

  var AppointType = $(this).children('a').text();
  switch (AppointType) {
    case "R":
      $("#spCsCharge").text("500 Rs");
      break;
    case "T":
      $("#spCsCharge").text("1000 Rs");
      break;
  }

  $(this).siblings().removeClass("Sappo");
  $(this).toggleClass("Sappo");
});

.ulmenu li a {
  float: left;
  text-decoration: none;
  color: white;
  padding: 11.5px 16px;
  background-color: #808080;
  border: 1px solid #fff;
}
.ulmenu li.Tappo a { background-color: #F39090; }
.ulmenu li.Sappo a { background-color: green; }
.ulmenu li.ABappo a { background-color: #ccc; }
#spCsCharge { clear: both; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Mpanel" class="menu_simple">
  <ul class="ulmenu">
    <li><a href="#">R</a></li>
    <li class="ABappo"><a href="#" style="pointer-events: none; cursor: none">X</a></li>
    <li><a href="#">R</a></li>
    <li><a href="#">R</a></li>
    <li class="Tappo"><a href="#">T</a></li>
    <li class="Tappo"><a href="#">T</a></li>
  </ul>
</div>
<div id="spCsCharge"></div>

Answer 3

＆＃13;

 $("#Mpanel").on('click', '.ulmenu li', function() {

        var AppointType = $(this).text();

        if (AppointType == "R") {
            $("#spCsCharge").text("500 Rs");
        } else if (AppointType == "T") {
            $("#spCsCharge").text("1000 Rs");
        }
            $(this).siblings(".tClass.Sappo").addClass('Tappo').removeClass('Sappo');
            $(this).siblings(".rClass.Sappo").removeClass('Sappo');
            $(this).toggleClass("Sappo");

    });

＆＃13;

.ulmenu li a {
                float: left;
                text-decoration: none;
                color: white;
                padding: 11.5px 16px;
                background-color: #808080;
                border: 1px solid #fff;
     }
    .ulmenu li.Tappo a {
        background-color: #F39090;
    }

    .ulmenu li.Sappo a {
        background-color: green;
    }

    .ulmenu li.ABappo a {
        background-color: #ccc;
    }

＆＃13;

<body>
    <div id="Mpanel" class="menu_simple">
        <ul class="ulmenu">
            <li class="rClass"><a href="#">R</a></li>
            <li class="ABappo"><a href="#" style="pointer-events: none; cursor: none">X</a></li>
            <li class="rClass"><a href="#">R</a></li>
            <li class="rClass"><a href="#">R</a></li>
            <li class="Tappo tClass"><a href="#">T</a></li>
            <li class="Tappo tClass"><a href="#">T</a></li>
        </ul>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</body>

＆＃13;

我已经在HTML中添加了2个类并相应地修改了JS。如果这是预期的，请告诉我

将toggleclass函数应用于已经有一个类的元素

3 个答案: