Question

我试图完整地提取GTM中的产品描述标签文本（部署结构化数据，yada yada）。我面临的问题是，我试图提取的文本的一半存在于＆＃34; Read More ...＆＃34;链接到产品页面。

呈现后页面上元素的布局是：

<p class="product-description">
"This is the first part of the description of this product! It is read, warm,"
   <span class="morecontent" display="inline"> //inline when expanded, none when clicked
     <span class="readmore-description">
        "fuzzy, and black."
     </span>
    <a class="more-link">&nsbp;Less</a> //&nsbp;Less when expanded, &nsbp;Read More.. when clicked
  </span>
 </p>

我没有走得太远......到目前为止我所做的一切都是：

function() {

  var description = document.querySelector("p.product-description");

  return description;

}

我想得到＆＃34;这是该产品描述的第一部分！它是阅读，温暖，模糊和黑色。＆＃34;回来。

谢谢！

Answer 1

我在隐藏的内容上使用了一个类。当该类存在时，内容被隐藏，当内容不存在时，内容显示。把它想象成一个开关。

＆＃13;

$('.more-link').on('click', function(e){
  e.preventDefault();
  $('.morecontent').toggleClass('hidden');
  if ($('.morecontent').hasClass('hidden')) {
    $('.more-link').html('More');  
  }
  else {
    $('.more-link').html('Less'); 
  }
});

＆＃13;

.hidden {
  display: none;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="product-description">
"This is the first part of the description of this product! It is read, warm,"
   <span class="morecontent hidden" display="inline"> 
     <span class="readmore-description">
        "fuzzy, and black."
     </span>
  </span>
  <a href="#" class="more-link">More</a>
 </p>

＆＃13;

在＆＃34; ReadMore中连接文本......＆＃34;触发

1 个答案: