使用一些自定义ColdFusion尝试使一些代码变得动态化。

huangapple
go评论47阅读模式
英文:

trying to make some code dynamic using some custom coldfuison

问题

你好，以下是代码的翻译部分：

<div class="rating-star-wrap">
    <span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="star-rating active">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path>
        </svg>
    </span>
    <span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="star-rating active">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path>
        </svg>
    </span>
    <span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="star-rating active">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path>
        </svg>
    </span>
    <span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="star-rating">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path>
        </svg>
    </span>
</div>

希望这对您有所帮助。如果您有其他问题，请随时提出。

英文:

Hi I have this code in html

&lt;div class=&quot;rating-star-wrap&quot;&gt; &lt;span&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; class=&quot;star-rating active&quot;&gt; 
    &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt; 
    &lt;/svg&gt; &lt;/span&gt; &lt;span&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; class=&quot;star-rating active&quot;&gt; 
    &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt; 
    &lt;/svg&gt; &lt;/span&gt; &lt;span&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; class=&quot;star-rating active&quot;&gt; 
    &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt; 
    &lt;/svg&gt; &lt;/span&gt; &lt;span&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; class=&quot;star-rating active&quot;&gt; 
    &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt; 
    &lt;/svg&gt; &lt;/span&gt; &lt;span&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; class=&quot;star-rating&quot;&gt; 
    &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt; 
    &lt;/svg&gt; &lt;/span&gt; 
&lt;/div&gt;

where the purpose is that i am trying to use the above code basically dynamically based upon the ratings i get by the table data

what could be the best approach for dealing with this kind of code

使用一些自定义ColdFusion尝试使一些代码变得动态化。

that is the DB and if the division by 0, is not possible, so it should be 5 stars max, no more than 5, because that is maximum what my code does.

please guide how can i moved head with that code

the unique_content_id is the productID i have

答案1

得分: 0

你可以通过SQL获取每个记录的评分：

SELECT
	IF(
		(vote_up + vote_down) > 0,               -- 防止除以零
		((vote_up / (vote_up + vote_down)) * 5), -- 5 是最大星级
		0                                        -- 尚无投票
	)
	AS starRating

然后，你可以循环遍历来自此SELECT的查询结果，并像这样打印星级：

<cfquery name="ratings" datasource="...">

	SELECT
		...

</cfquery>

<cfset svgFullStar  = '&lt;svg&gt;...&lt;/svg&gt;'>
<cfset svgEmptyStar = '&lt;svg&gt;...&lt;/svg&gt;'>

<cfloop query="ratings">

	<cfset fullStars  = round(ratings.starRating)> <!-- 或者在SQL SELECT中使用ROUND() -->
	<cfset emptyStars = (5 - fullStars)>

	<div class="row">
		<div class="product">
			#encodeForHtml(ratings.unique_content_id)#
		</div>
		<div class="rating-star-wrap">
			#repeatString(svgFullStar,  fullStars)#
			#repeatString(svgEmptyStar, emptyStars)#
		</div>
	</div>

</cfloop>

这是用于显示整星级（例如3/5）的显示逻辑。

英文:

You can fetch the rating per record via SQL:

SELECT
	IF(
		(vote_up + vote_down) &gt; 0,               -- prevent division by zero
		((vote_up / (vote_up + vote_down)) * 5), -- 5 is the maximum of stars
		0                                        -- no votes yet
	)
	AS starRating

You can then loop over your query result from this SELECT and print stars like this:

&lt;cfquery name=&quot;ratings&quot; datasource=&quot;...&quot;&gt;

	SELECT
		...

&lt;/cfquery&gt;

&lt;cfset svgFullStar  = &#39;&lt;svg&gt;...&lt;/svg&gt;&#39;&gt;
&lt;cfset svgEmptyStar = &#39;&lt;svg&gt;...&lt;/svg&gt;&#39;&gt;

&lt;cfloop query=&quot;ratings&quot;&gt;

	&lt;cfset fullStars  = round(ratings.starRating)&gt; &lt;!--- or ROUND() in the SQL SELECT ---&gt;
	&lt;cfset emptyStars = (5 - fullStars)&gt;

	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;product&quot;&gt;
			#encodeForHtml(ratings.unique_content_id)#
		&lt;/div&gt;
		&lt;div class=&quot;rating-star-wrap&quot;&gt;
			#repeatString(svgFullStar,  fullStars)#
			#repeatString(svgEmptyStar, emptyStars)#
		&lt;/div&gt;
	&lt;/div&gt;

&lt;/cfloop&gt;

That's the display logic for whole stars like 3/5.

huangapple
  • 本文由 发表于 2023年7月3日 12:31:15
  • 转载请务必保留本文链接：https://go.coder-hub.com/76601849.html
  • coldfusion
  • lucee
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定