javascript - 从 HTML 中的 div 列表中单击 div 上的打开 block

Question

<div class="lsiting-main">
  <div class="row">
  <div class="col-md-8">
  <div class="col-md-4 text-right">
    <span class="close-list">
    <span class="funded-list">
    <span class="new-list">
      <div class="technology closedlanguage" headerindex="0h">
          <span class="accordprefix"> </span>
             View Detail Notice
          <span class="accordsuffix"></span>
      </div>
    </div>
</div>
<div class="thelanguage" contentindex="0c" style="display: none;">
   <div align="center">
   <div class="big-listing-details">
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>

我有 class="listing-main" 列表，我尝试打开 block class="thelanguage"style="display: none;" 点击class="technology closedlanguage"。但我需要的是，当我点击 class="technology closedlanguage" 时，类将 "closedlanguage" 更改为 "openlanguage" 和样式将 'none' 更改为 'block'。

但是当我点击的时候，div 列表中只有一个 block 打开

<script type="text/javascript">
$(document).ready(function () {
    $('.lsiting-main .closedlanguage').click(function (event) {
        event.preventDefault();
        var target = $('.thelanguage');
        $(target).toggleClass('hidden show');
        $('.thelanguage').css('display', 'block');
    })
});

Answer 1

我已经稍微更新了 HTML，如果您愿意使用 JavaScript，请引用下面的代码，它会按您的预期工作。

这是 JSFiddle 链接:Working JS Fiddle Link

JS 代码是:

 <script>
 document.getElementById("technologyclosedlanguage").addEventListener("click", myFunction);

function myFunction(){
            var thelanguage = document.getElementById("thelanguage");
            var technology =  document.getElementById("technologyclosedlanguage");     
            thelanguage.style.display="block";
            technology.className = "technologyopenlanguage";
            alert(technology.className); //class name changed.
}
</script>

HTML 代码是:

    <div class="lsiting-main">
  <div class="row">
  <div class="col-md-8">
  <div class="col-md-4 text-right">
    <span class="close-list">
    <span class="funded-list">
    <span class="new-list">
      <div class="technologyclosedlanguage" id="technologyclosedlanguage" headerindex="0h">
          <span class="accordprefix"> </span>
             View Detail Notice
          <span class="accordsuffix"></span>
      </div>
    </div>
</div>
<div class="thelanguage" id="thelanguage" contentindex="0c" style="display: none;">
   <div align="center">
   <div class="big-listing-details">
       The Language
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>

让我知道它是否有效，对您有帮助。快乐编码。