更改 jQuery 工具提示的“div 类”

Question

我正在使用jQuery UI工具提示插件。

现在我想用 jQuery 更改<div class="ui-tooltip-content2"> content2 <div class="ui-tooltip-content"> 。

我在“每个” function 中使用$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content')但它没有显示任何影响。 我在控制台中没有收到错误。

我做了一个JSFiddle 。 只需检查工具提示，您就会看到 class 没有改变。

完整代码：

$('*[data-id]').tooltip({
    tooltipClass: "tooltipitem",
    content: '<div class="loading">Laden...</p>',
    hide: {
        effect: "slide",
        delay: "10000"
     },
    position: {
        my: "left+153 top+20",
        collision: "flipfit"
     },
});

$('*[data-id]').each(function () {

    let $tooltip = $(this);
    let id = $tooltip.attr("data-id");

    ajaxManager.add({
        url: "https://xy.eu/datenbank/itemscript.php",
        type: "GET",
        cache: "true",
        data: {
            "var": id,
        },

        success: function (data) {

            let $content = $(data);
            let title = $content.siblings('[class^=item-titletl]').text()
            let icon = $content.siblings('[class^=parent2]').html()

            $tooltip.tooltip({
                content: function () {        
                        return [data];  
                },
            });

            $('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');
   
            $tooltip.attr("title", "=")

           $("<img class='icon-small' src='https://xy.eu/images/icons/" + icon + "'/                         
           >" + title + "</>").appendTo($tooltip);
            
        }
    });
});

});

Answer 1

问题是，当您在元素上使用 hover 时，工具提示会附加，这就是为什么此代码不起作用，此时您的元素尚未创建。

$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');

您可以通过添加此选项来做到这一点，这将向ui-tooltip-content添加额外的 class

classes: {
    "ui-tooltip-content": "ui-tooltip-content2"
  },

完整的代码将是

$tooltip.tooltip({
classes: {
    "ui-tooltip-content": "ui-tooltip-content2"
  },
  content: function () {        
       return [data];  
    },
});

删除这一行：

$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content'); 

您可以在此处查看文档。

Answer 2

问题出在您的代码中，您尝试添加和删除类，但 DOM 中不存在该元素。 我修改了你的代码

jQuery(document).ready(function ($) {

        var ajaxManager = $.manageAjax.create('cacheQueue', {
            queue: true,
            cacheResponse: true
        });
    
// Tooltip Script

        $('*[data-id]').tooltip({
            tooltipClass: "tooltipitem",
            content: '<div class="loading">Laden...</p>',
            hide: {
                effect: "slide",
                delay: "100000"
      },
      position: {
         my: "left+153 top+20",
         collision: "flipfit"
        },
        });


        $('*[data-id]').each(function () {

            let $tooltip = $(this);
            let id = $tooltip.attr("data-id");

            ajaxManager.add({
                url: "https://elder-scrolls-online.eu/datenbank/itemscript.php",
                type: "GET",
                cache: "true",
                data: {
                    "var": id,
                },

                success: function (data) {

                    let $content = $(data);
                    let title = $content.siblings('[class^=item-titletl]').text()
                    let icon = $content.siblings('[class^=parent2]').html()

                    $tooltip.tooltip({

                        content: function () {
        
                                return [data];  
                        },
                    });
          setTimeout(AdAndRemoveClass,500);
                    $tooltip.attr("title", "=")
          console.log($tooltip)
          $("<img class='icon-small' src='https://www.elder-scrolls-online.eu/images/icons/" + icon + "'/                       >" + title + "</>").appendTo($tooltip);
                    
                }
            });
        });
    });
  
  function AdAndRemoveClass(){

var tool= $('.ui-tooltip-content');
if(tool.length ==0){
  setTimeout(AdAndRemoveClass,500);
}
else{
          console.log(tool)
          tool.addClass('ui-tooltip-content2');
          tool.removeClass('ui-tooltip-content');
          }
  }

在这里检查工作小提琴