在 <div> 无序列表项中删除并重新添加类属性

Posted 2023-05-09

【中文标题】在 <div> 无序列表项中删除并重新添加类属性

【英文标题】：Remove and re-add Class Attribute inside a <div> unordered list item

【发布时间】：2021-04-24 09:24:36

【问题描述】：

这是我能够解决的答案。 想要在按钮点击事件发生后从 Hyperlink1 更改为 Hyperlink3 的 css class="jsTree-clicked"。

$(document).ready(function () 
        //remove Class
        $('#myJSTree').find('.jsTree-clicked').removeClass('jsTree-clicked');

        //need to do add it to List Item which has Id =3
        //check the list item which has id =3 if so add the class to it
        // It is not a button click event.         
$('#myJSTree li').each(function (i, li) 
            console.log('<li> id =' + $(li).attr('id'));
            var myIdVal = $(li).attr('id');
            if (myIdVal == 3) 
                $(this).addClass('jsTree-clicked');
                      
        );
    );

.jsTree-clicked  background-color:red;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
  <ul class="nav nav-list">
    <li id="1">
      <a class="jsTree-clicked" title="Hyperlink1">HyperLink1</a>
    </li>
    <li id="2">
      <a title="Hyperlink2">HyperLink2</a>
    </li>
    <li id="3">
      <a title="Hyperlink3">HyperLink3</a>
    </li>
  </ul>
</div>

当点击超链接时，JsTree 会添加一个 class="jsTree-clicked" 。当您导航到不同的节点时，它将删除相同的类并将其重新添加到导航的节点。

预期

我想要一个函数根据 div 内的 ID 删除给定列表项的 [class="jsTree-clicked"]。 和 通过传递 Key 即 ID 将 [class="jsTree-clicked"] 重新添加到任何 ListItem 。

我希望我能够解释我的问题。 谢谢

我的 JSTree 是第三方开源的。

【问题讨论】：

告诉我缺少什么？至少它会帮助我更好地分析问题。而不是给我一个负面的评价。

您好，验证错误是什么意思？

这些超链接有 ID。想象一下，它是一个 FormId，它被传递给后端以进行一些服务器端处理并将一些数据显示到表单中。如果在控件中出现错误，例如（表单中的文本框控件为空）。表格会显示一些错误。因此，此验证发生在您导航到任何其他超链接表单之前。如果有验证错误。我也希望 JSTree 能够实现。这是通过删除和阅读 class="Js-Tree-clicked"

假设您在 Hyperlink1 并单击 Hyperlink2 。首先，它应该将所有控件（文本框、文本框表等）保存在 Hyperlink1 中，如果有错误应该显示。如果出现错误，我们单击导航的 JSTree 即 Hyperlink2 不应该有 class="jsTree-Clicked" 而是应该在 Hyperlink1 中，因为它有验证错误并且没有处理。希望它有助于理解我的逻辑

那么你在哪里检查那个错误？你有什么功能吗？

【参考方案1】：

$('.nav-list').on('click', 'li', function() 
    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
);

.active
background-color:red;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
  <ul class="nav nav-list">
    <li id="1">
      <a title="Hyperlink1">HyperLink1</a>
    </li>
    <li id="2">
      <a title="Hyperlink2">HyperLink2</a>
    </li>
    <li id="3">
      <a title="Hyperlink3">HyperLink3</a>
    </li>
  </ul>
</div>

【参考方案2】：

也许这对你有帮助？

$(function ()  $('#myJSTree').jstree(); );

const toggle = (e) => 
    if (+$("#test").val()>=10 ) 
      e.target.classList.remove("jstree-clicked");
      console.log("You entered an invalid number.")
    
    console.log(e.target)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />


<div id="myJSTree">
        <ul>
          <li id="1">
            <a title="Hyperlink1" onclick="toggle(event)">HyperLink1</a>
          </li>
          <li id="2">
            <a title="Hyperlink2">HyperLink2</a>
          </li>
          <li id="3">
            <a title="Hyperlink3">HyperLink3</a>
          </li>
        </ul>
</div>
<input type="text" value="3" id="test"> &lt; 10

我简单地包含了一个基本的toggle() 函数来演示删除和添加类名“jsTree-clicked”的意义。请注意，JStree 会动态地将其他类分配给应保留在那里的节点。

在我看来，类 jstree-clicked（不是：jsTree-clicked）是由 JSTree 在单击元素后设置的。您可能需要进一步解决这个问题才能得到您想要的。

以下可能是您想要的更多。仅当满足checkinput() 中的预定义测试条件时，它才会“链接”到给定的href：

$(function ()  $('#myJSTree').jstree(); );

const checkinput = (e) => 
    if (+$("#test").val()>=10 ) 
      console.log("You entered an invalid number.")
     else document.location.href=e.target.href;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />


<div id="myJSTree">
        <ul>
          <li id="1">
            <a title="Hyperlink1" href="https://jsonplaceholder.typicode.com/users/1" onclick="checkinput(event)">HyperLink1</a>
          </li>
          <li id="2">
            <a title="Hyperlink2" href="https://jsonplaceholder.typicode.com/users/2">HyperLink2</a>
          </li>
          <li id="3">
            <a title="Hyperlink3">HyperLink3</a>
          </li>
        </ul>
</div>
<input type="text" value="3" id="test"> &lt; 10<br>
HyperLink1 will link to the page "user1" if the input is valid, <br>otherwise an eror will be shown in the console.