Question

我有一个包含多个块的网站，每个块包含六个不同的语句，如下所示：

A座

A-1
A-2
A-3
A-4
A-5
A-6

B座

B-1
B-2
...

在每个块中，用户决定点击一个项目（例如A-3），该项目（例如A-3）将保留，其他五个项目将消失（通过.toggle（））。

如果单击所选项目（例如A-3），则块的所有项目将再次可见，用户可以再次进行选择。

在每个块减少到一个项目（例如A-3，B-2，C-4，D-6 ......）之后，我想获取所选项目的内容以将它们收集到文本区域中，变量或其他东西。

我的实际代码如下：

    "use strict";

$(document).ready(function () {

  sizeContent();

  $(window).resize(sizeContent);

  function sizeContent() {
    var newHeight = ($("html").height() - $(".pageheader").height() - $(".pagefooter").height()) + "px";
    $(".wrap").css("min-height", newHeight);
 }



  $( "div#a.a" ).click( function () {
    $( "div#b.a, div#c.a, div#d.a, div#e.a, div#f.a, h4.headline_a " ).toggle("slow");
  });

  $( "div#b.a" ).click( function () {
    $( "div#a.a, div#c.a, div#d.a, div#e.a, div#f.a, h4.headline_a " ).toggle("slow");
  });

  $( "div#c.a" ).click( function () {
    $( "div#b.a, div#a.a, div#d.a, div#e.a, div#f.a, h4.headline_a " ).toggle("slow");
  });

  $( "div#d.a" ).click( function () {
    $( "div#b.a, div#c.a, div#a.a, div#e.a, div#f.a, h4.headline_a " ).toggle("slow");
  });

  $( "div#e.a" ).click( function () {
    $( "div#b.a, div#c.a, div#d.a, div#a.a, div#f.a, h4.headline_a " ).toggle("slow");
  });

  $( "div#f.a" ).click( function () {
    $( "div#b.a, div#c.a, div#d.a, div#e.a, div#a.a, h4.headline_a " ).toggle("slow");
  });



  $( "div.bemerkung_done" ).click(function () {
      var print = $( "div.div_a" ).text();
      $( "div.bemerkung_done" ).after( print );
  });


});

我的问题是：如何在切换其余部分后获得一个可见的项目？我已经尝试使用onclick-function更改id，但之后没有任何反应，因为我认为，它根本不对应于更改的id。我该如何解决这个问题？

我期待任何建议并感谢您的帮助！

编辑：我的HTML代码

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Testseite</title>

    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

    <link href="css/normalize.css" rel="stylesheet" media="all">
    <link href="css/styles.css" rel="stylesheet" media="all">

    <link rel="icon" type="image/png" href="Grafiken/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="Grafiken/favicon-16x16.png" sizes="16x16">

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

</head>

<body class="bemerkung" id="bemerkung">

<header role="banner" class="pageheader" >

    <div class="inside">
        <a href="index.php" title="home" id="logo">
            <img src="Grafiken/logo.png" alt="home">
        </a>
    </div> <!-- inside -->

</header>

<div class="wrap">
    <main class="main">

        <div class="headline">
            <h3>Ueberschrift</h3>
        </div>

        <div class="div_a">
            <h4 class="headline_a">Block A</h4>
            <div class="a" id="a">
                <p>A-1</p>
            </div>
            <div class="a" id="b">
                <p>A-2</p>
            </div>
            <div class="a" id="c">
                <p>A-3</p>
            </div>
            <div class="a" id="d">
                <p>A-4</p>
            </div>
            <div class="a" id="e">
                <p>A-5</p>
            </div>
            <div class="a" id="f">
                <p>A-6</p>
            </div>
        </div>

        <div class="bemerkung_done">
            <p class="bemerkung_generieren">>> Bemerkung generieren</p>
        </div>


    </main>
</div>

<footer role="contentinfo" class="pagefooter">
    <div class="inside">
        <p>Footer</p>
    </div>
</footer>

</body>

</html>

Answer 1

要获取页面上显示的项目，您可以使用:visible selector

使用以下代码阅读文本

var print = $( "div.a:visible" ).text();

而不是

var print = $( "div.div_a" ).text();

参考：https://api.jquery.com/visible-selector/

同时查看代码，切换每个元素的方式并不好。您可以更干净的方式执行此操作，使用以下代码切换块。

$( "div.a" ).click(function(){
$( "div.a" ).not(this).toggle("slow");
})

只需更改新块的类。

更改您的Javascript代码后会看起来像这样（HTML中没有变化）：

$(document).ready(function () {

  sizeContent();

  $(window).resize(sizeContent);

  function sizeContent() {
    var newHeight = ($("html").height() - $(".pageheader").height() - $(".pagefooter").height()) + "px";
    $(".wrap").css("min-height", newHeight);
 }


$( "div.a" ).click(function(){
$( "div.a" ).not(this).toggle("slow");
})



  $( "div.bemerkung_done" ).click(function () {
      var print = $( "div.a:visible" ).text();
      $( "div.bemerkung_done" ).after( print );
  });


});

切换并重新切换几个<div> -blocks

1 个答案: