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

coder 2023-08-07 原文

我正在编写如下所示的 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;
}
?>

注意事项:

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

何在 javascript 34 gt lt php html css modal-dialog

有关javascript - 如何在 JS 中单击省略号时在模式中显示整个文本？的更多相关文章

ruby - 如何在 Ruby 中顺序创建 PI - 2
出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby 中生成它们？ - 2
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
ruby-on-rails - 如何在 ruby 中使用两个参数异步运行 exe？ - 2
exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby中使用两个参数异步运行exe吗？我已经尝试过ruby命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何rubygems会支持我的问题？最佳答案您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除
ruby - 如何在续集中重新加载表模式？ - 2
鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende
ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2
我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121
ruby-on-rails - 如何在 ruby 交互式 shell 中有多行？ - 2
这可能是个愚蠢的问题。但是，我是一个新手......你怎么能在交互式rubyshell中有多行代码？好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗？再次抱歉，如果这是一个愚蠢的问题。谢谢。最佳答案这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

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

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

有关javascript - 如何在 JS 中单击省略号时在模式中显示整个文本？的更多相关文章

随机推荐