CODEWITHSUNDEEP
javascriptjquery
Lewis
Lewis

Reputation: 2198

Can someone tell me how the function is targeting the element?

Im not well adversed with Jquery and I need to know how the function in this script knows what element to modify.

JS FIDDLE

I know it has somthing to do with;

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

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

I just dont know how it targets the element with the class panel though, if you understand what im trying to say... :/

Upvotes: 0

Views: 63

Answers (4)

Serhii Kuzmychov
Serhii Kuzmychov

Reputation: 1213

at first: take a look at jQuery UI tabs

for your question: 

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

but the main issue it is how to hide previous shown panel

Upvotes: 0

Victor Soto
Victor Soto

Reputation: 234

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");

});

Upvotes: 1

Anup
Anup

Reputation: 9746

DEMO - Try clicking on Panel One in the fiddle.

This what is selecting element :-

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

Explanation :-

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

ID of Element is selected in this way

  1. #

  2. Value of $(this).data('content') = panel-one Getting the data-content property value of <a>

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

So collectively string becomes "#panel-one"

Upvotes: 1

Kristof Feys
Kristof Feys

Reputation: 1842

this line selects the element:

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

What it does is it takes the element that is currently clicked $(this) and checks the data attribute 'content'... Because you've defined data-content="panel-one" for example... It will trigger the item with that id since your settings.objSlidePanel will be equal to "#panel-one"

Upvotes: 2

Related Questions