jQuery变量选择器不能与find()一起使用

时间:2017-01-21 13:10:14

标签: javascript jquery css

我正在尝试将唯一ID作为变量传递并遇到问题。

DateTime date;

var cultureInfo = new CultureInfo("nl-NL");

System.Console.Write("give date (DD/MM/JJJJ) : ");
date = DateTime.Parse(Console.ReadLine(),cultureInfo);



System.Console.Write("the day is a  " + cultureInfo.DateTimeFormat.GetDayName(date.DayOfWeek));

我正在尝试将变量中的唯一ID传递给新创建的DIV中的parsedHTML Ajax响应,虽然我的控制台日志指示选择器到达但它没有完成该功能。我知道我正在做一些基本的错误(可能是上下文),就像将ID直接放在代码中一样(参见“var elements”上面的空白代码),它显示了相关的DIV?

List<String>

我做错了什么?

1 个答案:

答案 0 :(得分:1)

https://jsfiddle.net/14hv45ua/53/

$('.tt1').each(function() {
  var $scoop = '#data_' + this.id; // <-- this MUST be a "string"

  $(this).qtip({
    content: {
      text: function(event, api) {
        api.elements.content.html('Loading...');

        fetchTtip("pages/tooltip-pricing-essential1.html") // <-- see below
          .done(function(content) { // <-- PLEASE use "done" method
            // Append the parsed HTML of the retrieved page to a dummy <div/>, and find all <$scoop> elements
            var element = $("<div>").html(content).find($scoop);

            // Set the content of the tooltip to the selected element(s)
            api.set('content.text', element.html()); // <-- value MUST be a "string"
            //api.elements.content.html(content);
          })
          .fail(function(xhr, status, error) { // <-- PLEASE use "fail" method
            api.set('content.text', status + ':  ' + error);
          });
      }
    },
    position: {
      target  : 'event', // Use the triggering element as the positioning target
      my      : 'bottom center',
      at      : 'right center',
      viewport: $(window),
      adjust : {
        x: -15
      }
    },
    style: {
      classes: 'qtip-light qtip-rounded qtip-shadow'
    },
    hide: {
      fixed: true,
      delay: 1500
    }
  });
});

function fetchTtip(URL){
  //// TEMPORARY FOR THIS DEMO - (simulate AJAX) ///////
  var deferred = new $.Deferred(),
      mockData = `
      <div id="data_e-tt1_1"><strong>Title 1</strong><br>text 1 - Lorem ipsum dolor sit amet consectetuer adipiscing elit</div>
      <div id="data_e-tt1_2"><strong>Title 2</strong><br>text 2 - aaaa</div>
      <div id="data_e-tt1_3"><strong>Title 3</strong><br>text 3 - bbb bbb</div>`;

  setTimeout(()=>{
    deferred.resolve(mockData);
  }, 1000)

  return deferred;
  //////////////////////////////////////////////////


  return $.ajax({
    url      : URL,
    dataType : 'html'
  })
}

请注意,在Qtip API中,.set()方法需要传递text值。

这是一种非常奇怪的方式,我建议不要从服务器获取工具提示文本,或者至少在需要显示它们之前获取它们。

另外,请不要在AJAX响应中使用一大块HTML,而是使用JSON,这样更容易使用。