Question

我对Jquery并不满意，我需要知道这个脚本中的函数如何知道要修改的元素。

我知道这与某事有关;

$(function(){
var settings = {
    objSlideTrigger: '.trigger', // link button id
    objSlidePanel: '', // slide div class or id
}

settings.objSlidePanel = "#"+ $(this).data('content') +"";

我只是不知道它是如何以类面板为目标的，如果你理解我想说的话......：/

Answer 1

此行选择元素：

settings.objSlidePanel = "#"+ $(this).data('content') +"";

它的作用是当前点击的元素$(this)并检查数据属性'content'...因为您已定义data-content="panel-one"例如......它将触发具有该ID的项目，因为您的settings.objSlidePanel将等于"#panel-one"

Answer 2

DEMO - 尝试点击小提琴中的Panel One。

这就是选择元素： -

settings.objSlidePanel = "#" + $(this).data('content') + "";
alert(settings.objSlidePanel);

说明： -

"#" + $(this).data('content') + ""

以这种方式选择元素的ID

＃
$(this).data('content') = panel-one的值获取<a>的数据内容属性值

// <a class="trigger" data-content="panel-one">Panel One</a>

因此，共同字符串变为"#panel-one"

Answer 3

var settings = {
  objSlideTrigger: '.trigger',// link button id
  objSlidePanel: '',// slide div class or id
}

// basically your script tells you that everything that has a class of .trigger
// is binded by a click and $(this) is used to access the html or dom that you've binded
// or that has a click event of that selector

$(settings.objSlideTrigger).bind('click', function() {

  // Going back to your question
  // $(this) <--- refers to the one you clicked on <a class="trigger" data-content="panel-#">
  // $(this).data('content') actually gets the data-content attribute of the one you've clicked

  settings.objSlidePanel = "#" + $(this).data('content') + "";

  // the code above gets the value
  // and now you're using it by
  // $(settings.objSlidePanel) or equivalent to
  // $("#" + $(this).data('content'));
  // or $("#panel-one");

});

Answer 4

首先：看看jQuery UI标签

您的问题：

settings.objSlidePanel = $("#"+ $(this).data('content'))

但主要问题是如何隐藏先前显示的面板

有人能告诉我该功能是如何定位元素的吗？

4 个答案: