Xin hỏi chút xíu về Javascript

Xin chào ae DEVS

Mình đang tìm hiểu về Javascript cơ bản và hiện tại đang mắc kẹt ở 2 js dưới đây

1) Do mình không cài được add-on này, ko biết là do xung đột hoặc code không phù hợp với template chỉnh sửa nặng của mình, nên mình nghĩ ra ý tưởng khác giúp làm gọn nhẹ đoạn script này.

Ví dụ mình có đoạn HTML dưới đây

Spoiler:

Mình muốn viết lại một đoạn script đơn giản, lấy và trả text từ link sau đó thay thế từ 'ABC' bằng đoạn text mà ta lấy được.

Code:

var getname = '{postrow.displayed.POSTER_NAME}'; // trả về <a href="http://domain.com/u1">Volunteer</a>
var gettext = getname.text; // chỉ trả về Volunteer only, ko kèm link
var result = replace(/'ABC'/gi, "gettext");

- Vì {postrow.displayed.POSTER_NAME} chỉ hoạt động được ở trong viewtopic_body template và nó sẽ trả về text kèm link bên trong.
Ví dụ : <a href="http://help.forumotion.com/u1">Volunteer</a> , ko phải text đơn giản.

Cách thức hoạt động của đoạn script là như vậy và sau khi chạy thành công thì HTML gốc sẽ trở thành

Spoiler:

Hoặc có thể nối chuỗi đơn giản bằng cách chia HTML thành 3 đoạn

Code:

document.write('firstpart + username.text + lastpart')

2) Đánh giá bài viết theo tỉ lệ %
Trước hết, mình có đoạn js tính % bài post dưới đây

Code:

<script type="text/javascript">
 tlbx = '{topics_REPLIES}'; //A trả về bộ đếm số bình luận hiện có
 tlby = '{topics_VIEWS}'; //B trả về bộ đếm lượt view hiện có
 result1 = parseFloat(tlbx / tlby * 100).toFixed(2);
 document.write(result1 + '%');
 if(result1 > 20){
 document.getElementById("hot-topic").innerHTML = "&nbsp;";                                          
 }
</script>

Về cơ bản, hệ thống rating này làm việc dựa trên thông số reply và lượt view, chia trung bình A/B*100 = C% tương đối chứ không cố định giá trị như star rating thông thường. Phần đầu chạy tốt tuy nhiên phần đặt điều kiện >20 cho #hot-topic có một chút nhầm lẫn là nó trả về kết quả hiển thị không đúng như mong đợi. Mọi người có thể xem rõ hơn khi trỏ chuột vào mục Ratio ở đây.


Cảm ơn ae đã giúp đỡ và nếu có thể xin giải thích rõ cách thức và ý nghĩa các đoạn lệnh để script hoạt động.

P/S: Variable đã được thay đổi cho dễ nhìn.

Tạm hiểu nhưng không chắc ý bạn lắm, có phải:

1. Bạn muốn một nút Add friend trong trang xem bài viết, cạnh profile của tác giả?
   
2. Bạn muốn thêm hiệu ứng (ví dụ màu sắc) cho các Ratio > 20%?
   

Cảm ơn baivong

1) Đúng là như vậy. :D
2) Mình chỉ xét theo điều kiện >20, sau đó nếu topic đủ yêu cầu thì trả về một <span id="hot-topic"> là hình trái tim cạnh topic icon. Lỗi xuất hiện ở đây là nó xét điều kiện đúng nhưng lại trả về sai vị trí.

Code:

{topics_list_box.row.ICON}&nbsp;<span id="hot-topic" class="tooltip top" data-tooltip="Most popular thread"></span>

1) Bạn muốn thêm vào chỗ nào thì chụp ảnh rồi đánh dấu mình làm cho.
2) Theo mình thì nên để đổi màu ratio, vì cái ratio đó là từ số bài viết của chuyên mục, sao lại đánh dấu vào bài viết mới?

À cái 1 thì tui nghĩ để nó hiện add-friend trước username (h2.imgz) sẽ hợp lý và dễ nhìn hơn. :D

Code:

<span id="profile_username">
                  {postrow.displayed.POSTER_NAME}
                  <div class="profile_box">
                     <span id="online_stt">{postrow.displayed.ONLINE_IMG}</span>
                     <div id="pcover_box" style="background-image: url(img/header.jpg);"></div>
                     <span id="puavtar">{postrow.displayed.POSTER_AVATAR}</span>
                     <h2 class="imgz">{postrow.displayed.POSTER_NAME}</h2>                                                     
                     <!-- BEGIN profile_field -->           
                     <p class="post_field">{postrow.displayed.profile_field.LABEL}&nbsp;{postrow.displayed.profile_field.CONTENT}</p>
                     <!-- END profile_field -->                        
                     <p class="rpg-vtr">{postrow.displayed.POSTER_RPG}</p>
                     <div id="link_box">
                        {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
                     </div>
                  </div>
               </span>

Còn vấn đề 2, nó tự lặp lại mỗi sticky/announcement/normal topic nhưng lại chỉ hiện ở bài sticky đầu tiên trong khi các topic khác thì ko :(

Xin lỗi bạn, lần trước có việc bất đắc dĩ phải khóa forum, nay tạm thời gió êm biển lặng mới mở ra lại.
Nếu bạn còn cần thì code của bạn đây:

1. Code:

   if (_userdata.session_logged_in) $('h2.imgz').before(function() {
    return '<a href="/profile?friend=' + this.textContent.trim() + '&mode=editprofile&page_profil=friendsfoes">+</a>';
});

2. Code:

   $('td.tc3[title]').each(function() {
    var ratio = this.title.split(/\s*\/\s*/);
    ratio = parseFloat(ratio[0] / ratio[1] * 100).toFixed(2);
    this.innerHTML = ratio + ' %';
    if (ratio > 20) $(this).closest('tr').find('td.tc4').append('<img src="http://i39.servimg.com/u/f39/17/86/02/22/heart_10.png" alt="Most popular thread">');
});

Sau khi mình thêm 2 đoạn script trên thì có vấn đề mới xuất hiện :

- Thẻ <img> lặp lại trong cùng 1 cột td.tc4 trong này.

Code:

<img src="//i39.servimg.com/u/f39/17/86/02/22/heart_10.png" alt="Most popular thread" title="Most popular thread">

- Add friend trong trang bài viết của h2.imgz thì bài post #1 đầu tiên bị dư ra 1 dòng.
Ví dụ trong bài viết này
1) Mình đang login là Admin và A là người chủ bài viết thì đoạn này bị lặp lại thêm 1 dòng nhưng bị trống ở {empty}

Code:

<a href="/profile?friend={empty}&mode=editprofile&amp;page_profil=friendsfoes">+</a>
<a href="/profile?friend=Admin&mode=editprofile&amp;page_profil=friendsfoes">+</a>

Còn nếu mình là user khác người post bài (Vivaldi Oculus), thì đoạn này không bị gì.

Code:

Test Account:
ID : Vivaldi Oculus
PW : qaz!@#456

Nếu không phiền, vui lòng giúp mình sửa lại đoạn script trên và giải thích chức năng của từng dòng lệnh để mình có thể hiểu rõ hơn về cách thức script hoạt động cũng như bổ sung kiến thức học tốt hơn.

Cảm ơn @baivong rất nhiều!
Trân trọng.

Đoạn 1 đặt cuối viewtopic_body, đoạn 2 đặt cuối topics_list_box.

Wá đỉnh!

Cảm ơn baivong!