Js click函数在click上复制divs类并将其存储为变量

Question

仍然需要帮助。

我正在设置一个click函数，该函数会嗅探被点击的divs类并将其存储为变量。要使用该变量来切换slideDown相对div。

JS

var $clickedOn = ...;

$( ".color" ).click(function() {
  $('.information').slideUp('slow');
  $( ".(clickedOn).tuckinfo" ).slideDown('slow');
}); 

HTML

这就是被点击的内容。

<div class="color-list">
  <div class="container">
    <section class="color hospitality">

这是我想要点击时下拉的内容。

<div class="greybg tuckinfo">
  <div class="container">
    <div class="hospitality-extended">

Codepen

http://i.imgur.com/nlA9O3M.gif http://imgur.com/nlA9O3M

Answer 1

您可以使用class属性。 this包含点击的元素

$( ".color" ).click(function() 
{
  var className = '.' + $(this).attr('class').replace('color','').split(/\s+/).join('.');
  $('.information').slideUp('slow');
  $( ".greybg.tuckinfo .container " + className + '-expanded').slideDown('slow');
}); 

Answer 2

我查看了你的标记，我将采取更全面的解决方案。

解决方案是将数据属性添加到要从中触发上滑/下滑的元素，然后添加将受影响的元素的相应数据属性。

<div data-trigger-action="set1">Click Me</div>

<div data-trigger-key="set1">Slide me 'round</div>

然后在你的JS中：

$("[data-trigger-action]").on("click", function(e)
{
    e.preventDefault();

  var _key = $(this).attr("data-trigger-action");

  $triggerKeys
    .filter('[data-trigger-key!="' + _key + '"]').slideUp()
    .end().filter('[data-trigger-key="' + _key + '"]').slideDown();
});

有关工作示例，请参阅this codepen。

（注意：我可能错误地标识了您想要影响的项目，因此移动[data-trigger-key]属性应解决该问题。）

修改

这里是更新的JS代码，它将使用您的原始HTML：

  // configure some action keys and selectors for elements to apply them to
  var keysToApply = {
    /* 'key/value to share': ['jquery-selector-to-action-el', 'jquery-selector-to-target-el'] */
    'hospitality': ['.color-list .color.hospitality', '.greybg.tuckinfo'],
    'taverns': ['.color-list .color.taverns', '#wrapper .information']
  };

  // loop through our config and apply the data attributes
  $.each(keysToApply, function(key, params)
  {
    $(params[0]).attr('data-trigger-action', key);
    $(params[1]).attr('data-trigger-key', key);
  })

  // cache our jQuery objects for our actions/keys
  var $triggerActions = $('[data-trigger-action]'),
      $triggerKeys = $('[data-trigger-key]');

  // handle the sliding up/down of items on click
  $("[data-trigger-action]").on("click", function(e)
  {
    e.preventDefault();

    var _key = $(this).attr("data-trigger-action");

    $triggerKeys
      .filter('[data-trigger-key!="' + _key + '"]').slideUp()
      .end().filter('[data-trigger-key="' + _key + '"]').slideDown();
  });

Answer 3

您可以从onousedown获取目标：

window.onmousedown = function (event) {console.log(event.target);}

那应该记录你的元素