单击另一个div时，jquery更改div的类和内联样式答案

【问题标题】：jquery change class and inline style of a div when another div is clicked单击另一个div时，jquery更改div的类和内联样式
【发布时间】：2019-04-10 06:25:12
【问题描述】：

这是我的 html -

<div id="5bdf3284466d57.18631639">
    <div class="tm-collapse tmaccordion">
        <h3 class="tm-epo-field-label tm-section-label tm-toggle">Display and glass
            <span class="tcfa tm-arrow tcfa-angle-down"></span>
        </h3>
        <div class="tm-collapse-wrap closed" style="display: none;">      
            <p>The display / glass of your device is broken, cracked 
                or damaged or your touch screen no longer responds.</p>         
        </div>
    </div>
</div>

我在页面的某处有另一个 div 标签是

<div id="displayandglass">Display and glass</div>

我试图有一个 jquery 点击事件，以便当

<div id="displayandglass">Display and glass</div>

点击后，上述新闻 div 之一的类和样式将从 -

<div class="tm-collapse-wrap closed" style="display: none;">

到

<div class="tm-collapse-wrap" style="display: block;">

由于嵌套级别，我无法这样做。有人可以帮忙吗？

【问题讨论】：

标签： jquery css onclick nested styles

【解决方案1】：

您可以简单地在您的#displayandglass div 上添加一个单击事件，该事件会删除close 类和style 属性（display:block; 是<div> 的默认值，因此无需内联添加该规则)。

$("#displayandglass").on("click", function(event){
    $(".tm-collapse-wrap").removeAttr("style").removeClass("closed");
    /* --> $(".tm-collapse-wrap").removeClass("closed").css("display", "block"); */
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div id="5bdf3284466d57.18631639">
    <div class="tm-collapse tmaccordion">
      <h3 class="tm-epo-field-label tm-section-label tm-toggle">Display and glass
        <span class="tcfa tm-arrow tcfa-angle-down"></span>
      </h3>
      <div class="tm-collapse-wrap closed" style="display: none;">      
        <p>The display / glass of your device is broken, cracked or damaged or your touch screen no longer responds.</p>         
      </div>
    </div>
  </div>
</div>
<div id="displayandglass">Display and glass</div>

编辑 1

因为您的 ID 有句点 (.)，所以您必须使用这个 sintax：#5bdf3284466d57\\.18631639 来选择它（例如，最好使用连字符而不是句点）

$("#displayandglass").on("click", function(event){
    $("#5bdf3284466d57\\.18631639 .tm-collapse-wrap").removeAttr("style").removeClass("closed");
    /* --> $(".tm-collapse-wrap").removeClass("closed").css("display", "block"); */
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="5bdf3284466d57.18631639">
    <div class="tm-collapse tmaccordion">
      <h3 class="tm-epo-field-label tm-section-label tm-toggle">Display and glass
        <span class="tcfa tm-arrow tcfa-angle-down"></span>
      </h3>
      <div class="tm-collapse-wrap closed" style="display: none;">      
        <p>The display / glass of your device is broken, cracked or damaged or your touch screen no longer responds.</p>         
      </div>
    </div>
  </div>
</div>
<div id="displayandglass">Display and glass</div>

【讨论】：

有许多
我如何捕捉到父 div 内的那个（也有唯一的 ID )，在本例中为
。它似乎是第一个孩子的孩子。
我尝试了这个，但效果很好 - $("#5bdf3284466d57.18631639 .tm-collapse-wrap").removeAttr("style").removeClass("closed");
...和你的#displayandglass打开所有.tm-collapse-wrap？页面中有多少个#displayandglass？？ ID 必须是唯一的。也许最好编辑你的问题，因为它不是很清楚。
#displayandglass 只是其中之一，也是独一无二的。您编写以前的代码可以工作，但它会打开所有 .tm-collapse-wrap。我只需要抓住
里面的那个
非常感谢...工作就像一个魅力.. ID 中的点搞砸了。

【解决方案2】：

向您的 div 添加一个类并将其用作选择器。

function showData() {
  $(".description").css('display', 'block');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="5bdf3284466d57.18631639">
  <div class="tm-collapse tmaccordion">
    <h3 class="tm-epo-field-label tm-section-label tm-toggle">Display and glass
      <span class="tcfa tm-arrow tcfa-angle-down"></span>
    </h3>
    <!-- 
         Using "description" class, you can use whatever you like, 
         or even use an ID. Use "." for classes and "#" for id attribute.
     -->
    <div class="tm-collapse-wrap closed description" style="display: none;">
      <p>The display / glass of your device is broken, cracked or damaged 
         or your touch screen no longer responds.</p>
    </div>
  </div>
</div>


<div id="displayandglass" onclick="showData()">Display and glass</div>

有关所有可能的 jQuery 选择器的列表，请查看 here

【讨论】：