Js点击函数，在点击时复制一个div类并将其存储为变量

Question

仍然需要帮助。

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

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

这应该记录你的元素