个人中心
gpt4 book ai didi

javascript - 如何在 JS 中单击省略号时在模式中显示整个文本？

转载 作者：太空狗 更新时间：2023-10-29 14:17:04 24 4
gpt4 key购买 nike

我正在编写如下所示的 php 代码，其中我在特定字数限制后添加了 ellipsis (...)。 

 <?php
      $programs = array();

      foreach ( $xml_files as $file ) {

      $xml = simplexml_load_file($src_dir."/".$file)  or die('Unable to load XML');

      $path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');

      $path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');

      $programs[] = array(  "episode_title" => (string)$path_title_en, 
            "description" => (string)$path_description_en;  
            } 

      $program["episode_title"] = substr($program["episode_title"],0,50).' <a href="">(...)</a>';  /* ellipsis is added after a particular word limit */ 

      $program["description"] = substr($program["description"],0,100).' <a href="">(...)</a>';  /* ellipsis is added after a particular word limit */        
 ?>
 <table>
    <tr>
        <td style="width:8%; text-align:center;"><?php echo $program["episode_title"]; ?></td> /* Line A */
        <td style="width:8%; text-align:center;"><?php echo $program["description"]; ?></td>   /* Line B */
    </tr>
 </table>

#A 行显示以下文本:


的洪水问题ABCSGSGSGSGSGSG 和
SHSHSGFASGXDS (...)

问题陈述:

我想知道我需要添加什么 JS 代码，以便在 click of (...) 时，全文显示在模态中，例如 this .

最佳答案

这是我对字符串提取的完全测试实现以及来自 w3schools 演示的所需模态功能:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {font-family: Arial, Helvetica, sans-serif;}

    .triggersModal {
        padding: 50px;
        border: solid 2px black;
        margin: 50px;
        cursor: pointer;
    }

    /* The Modal (background) */
    #myModal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }

    /* The Close Button */
    #modalCloser {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    #modalCloser:hover,
    #modalCloser:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }
</style>
</head>
<body>

<?php
$episodes = [
    [
        'episode_title' => 'Lorem Ipsum',
        'description' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."],
    [
        'episode_title' => "The standard 'Lorem Ipsum' passage, used since the 1500s",
        'description' => '"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."'
    ]
];

foreach ($episodes as $index => $episode) { ?>
    <div class="triggersModal" data-index="<?php echo $index; ?>">
        <div><?php
            if (strlen($episode['episode_title']) <= 50) {
                echo $episode['episode_title'];
            } else {
                echo substr($episode['episode_title'], 0, 50) , "(...)";
            }
        ?></div>
        <div><?php
            if (strlen($episode['description']) <= 100) {
                echo $episode['description'];
            } else {
                echo substr($episode['description'], 0, 100) , "(...)";
            }
        ?></div>
    </div>
<?php } ?>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span id="modalCloser">&times;</span>
    <p id="modalFullTitle"></p>
    <p id="modalFullDescription"></p>
  </div>
</div>

<script>
    // Transfer data from php to javascript
    let episodes = <?php echo json_encode($episodes); ?>, 
        classname = document.getElementsByClassName("triggersModal"),
        modal = document.getElementById("myModal");

    // Bind value insertion and modal display to onclick event of every element with named class    
    for (let i = 0, len = classname.length; i < len; ++i) {
        classname[i].onclick = function() {
            let index = this.getAttribute('data-index');
            document.getElementById("modalFullTitle").innerHTML = episodes[index]['episode_title'];
            document.getElementById("modalFullDescription").innerHTML = episodes[index]['description'];
            modal.style.display = "block";
        }
    }

    // Close the modal
    document.getElementById("modalCloser").onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

</body>
</html>

您需要用您的文件碎片替换我的硬编码输入(上方)。创建您的 $episodes数组并用一个循环显示主层的内容，在 <body> 中使用它标记要在其中显示可点击阅读更多框的位置:

<?php
$episodes = [];
$index = 0;
foreach ($xml_files as $file) {
    $xml = simplexml_load_file("{$src_dir}/{$file}");
    if (!$xml) {
        continue;
    }
    $episode_title = (string)$xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
    $description = (string)$xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
    $episodes[] = ['episode_title' => $episode_title, 'description' => $description];  // used downscript to deliver data to clientside/js
    ?>
    <div class="triggersModal" data-index="<?php echo $index; ?>">
        <div>
            <?php
            if (strlen($episode_title) <= 50) {
                echo $episode_title;
            } else {
                echo substr($episode_title, 0, 50) , "(...)";
            }
            ?>
        </div>
        <div>
            <?php
            if (strlen($description) <= 100) {
                echo $description;
            } else {
                echo substr($description, 0, 100) , "(...)";
            }
            ?>
        </div>
    </div>
    <?php
    ++$index;
}
?>

注意事项:

  1. 所有点击事件都写在脚本 block 中，而不是在 html 中，以保持整洁和可读。
  2. 仅当字符串有足够的长度时才需要使用省略号。
  3. 使用json_encode() 将数据从php 传递到js .
  4. 不要使用 die() .
  5. 我的偏好是不命名只会使用一次的变量(在 php 或 js 中)。有一些异常(exception)，但这是我的默认理念。
  6. 由于查找数组 ( episodes ) 是一个索引数组，因此从被单击的元素传递的唯一相关值是索引。 data-属性是维护主显示和要在模态中显示的数据之间的关系。
  7. 使用 <table>不推荐显示非表格内容的标签。我对页面和模态的样式所做的很少。我不想偏离您提供的演示太远。
  8. 需要标识的 HTML 元素应包含 id以便于定位 javascript。在多个位置出现的元素应包含 class .
  9. 测试我的脚本后，在主页或模式中显示引用文本没有问题。
  10. 我试图保持语法简单/可读，但我通常更喜欢在我的 php 和 js 中使用三元运算符(内联条件)。有些人更喜欢简写 <?=和 ?>当显示 php.我对此也很满意；选择任何你喜欢的。
  11. 最后但同样重要的是，如果您的输入字符串来自不安全的 channel 或者它们包含 html，使用 htmlspecialchars($string, ENT_QUOTES, 'UTF-8') 编码 html 实体将提高应用程序的稳定性/安全性。在屏幕上显示的任何字符串上(在计算字符串长度之后，但在显示之前)。这是一个很好的引用:https://stackoverflow.com/a/1996141/2943403

这是我的源代码转移到可运行的 Stackoverflow 片段:

	// Transfer data from php to javascript
	let lookup = [{"episode_title":"Lorem Ipsum","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},{"episode_title":"The standard 'Lorem Ipsum' passage, used since the 1500s","description":"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\""}], 
		classname = document.getElementsByClassName("triggersModal"),
		modal = document.getElementById("myModal");
			
	// Bind value insertion and modal display to onclick event of every element with named class	
	for (let i = 0, len = classname.length; i < len; ++i) {
		classname[i].onclick = function() {
			let index = this.getAttribute('data-index');
			document.getElementById("modalFullTitle").innerHTML = lookup[index]['episode_title'];
			document.getElementById("modalFullDescription").innerHTML = lookup[index]['description'];
			modal.style.display = "block";
		}
	}

	// Close the modal
	document.getElementById("modalCloser").onclick = function() {
		modal.style.display = "none";
	}
		
	// When the user clicks anywhere outside of the modal, close it
	window.onclick = function(event) {
	    if (event.target == modal) {
		    modal.style.display = "none";
	    }
	}
	body {font-family: Arial, Helvetica, sans-serif;}

	.triggersModal {
		padding: 50px;
		border: solid 2px black;
		margin: 50px;
		cursor: pointer;
	}

	/* The Modal (background) */
	#myModal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Sit on top */
	  padding-top: 100px; /* Location of the box */
	  left: 0;
	  top: 0;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}

	/* Modal Content */
	.modal-content {
	  background-color: #fefefe;
	  margin: auto;
	  padding: 20px;
	  border: 1px solid #888;
	  width: 80%;
	}

	/* The Close Button */
	#modalCloser {
	  color: #aaaaaa;
	  float: right;
	  font-size: 28px;
	  font-weight: bold;
	}

	#modalCloser:hover,
	#modalCloser:focus {
	  color: #000;
	  text-decoration: none;
	  cursor: pointer;
	}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

	<div class="triggersModal" data-index="0">
		<div>Lorem Ipsum</div>
		<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the (...)</div>
	</div>
	<div class="triggersModal" data-index="1">
		<div>The standard 'Lorem Ipsum' passage, used since the(...)</div>
		<div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore(...)</div>
	</div>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span id="modalCloser">&times;</span>
    <p id="modalFullTitle"></p>
	<p id="modalFullDescription"></p>
  </div>
</div>

</body>
</html>

另一个可运行的代码段，已调整为单独显示单元格文本...

	// Transfer data from php to javascript
	let lookup = [{"episode_title":"Lorem Ipsum","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},{"episode_title":"The standard 'Lorem Ipsum' passage, used since the 1500s","description":"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\""}], 
		classname = document.getElementsByClassName("triggersModal"),
		modal = document.getElementById("myModal");
			
	// Bind value insertion and modal display to onclick event of every element with named class	
	for (let i = 0, len = classname.length; i < len; ++i) {
		classname[i].onclick = function() {
			let index = this.getAttribute('data-index'),
                content = this.getAttribute('data-content');
			document.getElementById("modalText").innerHTML = lookup[index][content];
			
			modal.style.display = "block";
		}
	}

	// Close the modal
	document.getElementById("modalCloser").onclick = function() {
		modal.style.display = "none";
	}
		
	// When the user clicks anywhere outside of the modal, close it
	window.onclick = function(event) {
	    if (event.target == modal) {
		    modal.style.display = "none";
	    }
	}
	body {font-family: Arial, Helvetica, sans-serif;}

	.box {
		padding: 50px;
		border: solid 2px black;
		margin: 50px;
	}

    .triggersModal {
		cursor: pointer;
    }

	/* The Modal (background) */
	#myModal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Sit on top */
	  padding-top: 100px; /* Location of the box */
	  left: 0;
	  top: 0;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}

	/* Modal Content */
	.modal-content {
	  background-color: #fefefe;
	  margin: auto;
	  padding: 20px;
	  border: 1px solid #888;
	  width: 80%;
	}

	/* The Close Button */
	#modalCloser {
	  color: #aaaaaa;
	  float: right;
	  font-size: 28px;
	  font-weight: bold;
	}

	#modalCloser:hover,
	#modalCloser:focus {
	  color: #000;
	  text-decoration: none;
	  cursor: pointer;
	}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

	<div class="box">
		<div class="triggersModal" data-index="0" data-content="episode_title">Lorem Ipsum</div>
		<div class="triggersModal" data-index="0" data-content="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the (...)</div>
	</div>
	<div class="box">
		<div class="triggersModal" data-index="1" data-content="episode_title">The standard 'Lorem Ipsum' passage, used since the(...)</div>
		<div class="triggersModal" data-index="1" data-content="description">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore(...)</div>
	</div>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span id="modalCloser">&times;</span>
    <p id="modalText"></p>
  </div>
</div>

</body>
</html>

这里是上面的 php 执行的 pastebin 转储:https://pastebin.com/YnhNq6rD

关于javascript - 如何在 JS 中单击省略号时在模式中显示整个文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56385013/

24 4 0
文章推荐： html - 制作一个包含 PDF 整个高度的可滚动 div
文章推荐： git - 使用 format-patch 在 git 补丁中保留 gpg 签名
文章推荐： git - `git stash` 如何处理未跟踪的文件？
文章推荐： android - 限制游标查询中的行数
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com