Javascript Js click函数，在单击时复制divs类并将其存储为变量

仍然需要帮助

我希望设置一个click函数，用于嗅探被单击的divs类并将其存储为变量。然后使用该变量向下滑动切换相对div

JS

HTML

这就是正在单击的内容

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

这是我单击时要下拉的内容

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

---

您可以使用

类

属性<代码>此包含单击的元素

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

---

您可以从

onousedown

获取目标：

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

---

这应该记录您的元素

我查看了您的标记，我将尝试一个更完整的解决方案

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

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

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

有关工作示例，请参见

（注意：我可能错误识别了您想要影响的项目，因此移动[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();
  });

---

所以你现在的具体问题是什么？有没有点击的div？只有在某些元素中的那些？请澄清。此外，您在此处包含的单击功能似乎不相关。它被称为

this

，您可能想要的是

$（this）

哦，我明白了。你完全搞错了。使用

closest（）

和

find（）

以切换的元素为目标，而不是类。我不知道在var区域中放置什么。我只需要div.color中的另一个类，也就是说，我只需要hospitality，然后我想复制它并将其用作$（'variable'+-expanded.tuckinfo.）.slideDown（'slow'）；所以.hospitality扩展了.tuckinfo将是下拉的选择器。不确定这样的东西的语法是什么。虽然这回答了这个问题，但它非常脆弱。如果单击的元素有多个类，可能是由插件添加的呢？hmmm.good point@isherwood我仍然需要-但是扩展添加到字符串中。这很接近！我只是修改了它以支持多个CSS类。感谢isherwood。问题不在于处理多个类——而是目标元素本身不会有相同的类。它仍然不会在字符串末尾添加-扩展。谢谢你的帮助@imelgrat我该如何去掉所有代码，接受热情款待。然后再加上一个字符串，比如。好客扩展了吗？啊，对不起，我第一次误解了你。我以为您正在寻找一种方法来确定单击的元素

document.getElementByClass（“color hospitality”）.className=“hospitality expanded”

我没有使用jQuery，所以这是原始DOM版本。这个解决方案很棒！只是担心实现到wordpress中，因为必须更改标记。我可能应该指定。@Aaron啊，很好”ole WordPress。您有三个选项：（1）从主题编辑模板文件；（2） 有更多行JS代码分别针对每个触发器/受影响的元素；（3） 在附加click事件之前，使用一些初始化JS代码应用数据属性。在这三个糟糕的选项中，我会选择3。如果你也这么做，我会为你修改代码笔。@Aaron Alrighty，代码笔已经更新了。如果你有任何问题，请告诉我。谢谢你，我在你的代码笔中应用了js表单，并制作了一些隐藏的div。但当我单击taverns hospitality时，它会保持打开状态，反之亦然。请确保选择器（KeysApply中项目数组中的第二个值）正确标识了要影响的元素。我只是根据我能从标记中破译出来的东西尝试了一下。也许我换了选择器-是这样吗？

$("[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();
});

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