网站 › 『编程语言讨论求助区』 › 求助JS大神！如何给指定JS加样式~

独行剑侠 发表于 2021-7-26 17:18

求助JS大神！如何给指定JS加样式~

本帖最后由 独行剑侠 于 2021-7-26 18:07 编辑

{:1_919:}{:1_919:}{:1_919:}{:1_919:}已解决，感谢诸位大神！{:1_919:}{:1_919:}{:1_919:}{:1_919:}{:1_919:}
--------------------------刚刚接触js的新手，好多地方不懂，求大神不吝啬指点。


左侧为目前的，右侧试想要的最终效果



这是JS
$(function() {
    $.getJSON("js/data.json", function(data) {
      $.each(data, function(i, item) {
            let tag = '<li class="title"><svg class="icon" aria-hidden="true">';
            let icon = '<use xlink:href="#' + item.icon + '"></use>';
            let addList = tag + icon + '</svg> ' + item.title + '</li>';
            $('.list ul').append(addList);
            $.each(item.node, function(i, item) {
                let url = '<li><a rel="nofollow" href="' + item.url + '" target="_blank"' + '" class="tooltip">';
                let icon = '<svg class="icon" aria-hidden="true"><use xlink:href="#' + item.icon + '"></use>';
                let href = '<use xlink:href="#' + item.icon + '"></use>';
                let addList = url + icon + '</svg>' + item.text + '<span class="tooltiptext">' + item.prompt + '</span>' + '</a></li>';
                $('.list ul').append(addList)
            })
      });
   });
});

HULANG-BTB 发表于 2021-7-26 17:41

这获取是你需要的，改动之处在12行
$(function () {
$.getJSON("js/data.json", function (data) {
    $.each(data, function (i, item) {
      let tag = '<li class="title"><svg class="icon" aria-hidden="true">';
      let icon = '<use xlink:href="#' + item.icon + '"></use>';
      let addList = tag + icon + "</svg> " + item.title + "</li>";
      $(".list ul").append(addList);
      $.each(item.node, function (i, item) {
      let url = '<li><a rel="nofollow" href="' + item.url + '" target="_blank"' + '" class="tooltip">';
      let icon = '<svg class="icon" aria-hidden="true"><use xlink:href="#' + item.icon + '"></use>';
      let href = '<use xlink:href="#' + item.icon + '"></use>';
      let addList = '<div class="panel">' + url + icon + "</svg>" + item.text + '<span class="tooltiptext">' + item.prompt + "</span>" + "</a></li></div>";
      $(".list ul").append(addList);
      });
    });
});
});

as51271239 发表于 2021-7-26 17:46

$('.title').after('<div></div>')

独行剑侠 发表于 2021-7-26 17:53

HULANG-BTB 发表于 2021-7-26 17:41
这获取是你需要的，改动之处在12行
$(function () {
$.getJSON("js/data ...

这个不对
这个给<li>...</li>都加了DIV
成了
<div><li>...</li></div>
<div><li>...</li></div>
<div><li>...</li></div>

独行剑侠 发表于 2021-7-26 17:55

as51271239 发表于 2021-7-26 17:46


啊……这…… 说实话，没看懂，

幻影殇魂 发表于 2021-7-26 17:55

$(function () {
    $.getJSON("js/data.json", function (data) {
      $.each(data, function (i, item) {
            let tag = '<li class="title"><svg class="icon" aria-hidden="true">';
            let icon = '<use xlink:href="#' + item.icon + '"></use>';
            let addList = tag + icon + "</svg> " + item.title + "</li>";
            $(".list ul").append(addList);
            $.each(item.node, function (i, item) {
                let url = '<li><a rel="nofollow" href="' + item.url + '" target="_blank"' + '" class="tooltip">';
                let icon = '<svg class="icon" aria-hidden="true"><use xlink:href="#' + item.icon + '"></use>';
            let href = '<use xlink:href="#' + item.icon + '"></use>';
            let panStart = '<div class="panel">';
            let panEnd = "</div>";
                let addList = panStart + url + icon + "</svg>" + item.text + '<span class="tooltiptext">' + item.prompt + "</span>" + "</a></li>" + panEnd;
                $(".list ul").append(addList);
            });
      });
    });
});

HULANG-BTB 发表于 2021-7-26 17:57

独行剑侠 发表于 2021-7-26 17:53
这个不对
这个给...都加了DIV
成了


可以试试这个
$(function () {
$.getJSON("js/data.json", function (data) {
    $.each(data, function (i, item) {
      let tag = '<li class="title"><svg class="icon" aria-hidden="true">';
      let icon = '<use xlink:href="#' + item.icon + '"></use>';
      let addList = tag + icon + "</svg> " + item.title + "</li>";
      $(".list ul").append(addList);
      let div = '<div class="panel">';
      $.each(item.node, function (i, item) {
      let url = '<li><a rel="nofollow" href="' + item.url + '" target="_blank"' + '" class="tooltip">';
      let icon = '<svg class="icon" aria-hidden="true"><use xlink:href="#' + item.icon + '"></use>';
      let href = '<use xlink:href="#' + item.icon + '"></use>';
      let li = url + icon + "</svg>" + item.text + '<span class="tooltiptext">' + item.prompt + "</span>" + "</a></li>";
      div += li;
      });
      div += "</div>";
      $(".list ul").append(div);
    });
});
});

zhy10086 发表于 2021-7-26 17:57

从图片效果来看，<li>标签与<div>标签是不能同级的。
<div>标签要么放到<li>标签里面，
要么把<ul></ul>放到<div></div>里面。
如果是想分组，直接并列多个<ul></ul>就可以，在用<div>将他们包裹在一起

幻影殇魂 发表于 2021-7-26 17:59

幻影殇魂 发表于 2021-7-26 17:55

$(function () {
    $.getJSON("js/data.json", function (data) {


第12到第13，不过我看上面已经有人写了和我相同的代码，我编辑完提交后看到别人已经写好啦，我和他们写的是一样的

独行剑侠 发表于 2021-7-26 18:01

幻影殇魂 发表于 2021-7-26 17:55

$(function () {
    $.getJSON("js/data.json", function (data) {


大神，您这也不对，{:1_937:}
这个给<li>...</li>都加了DIV
成了
<div><li>...</li></div>
<div><li>...</li></div>
<div><li>...</li></div>


不是我想要的
<div class='panel'>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</div>

查看完整版本: 求助JS大神！如何给指定JS加样式~