当帖子有课时显示div

Question

Update I'd modded the CSS given by David Thomas a bit. Its now a banner.

.div.popular::before {
  /* setting the default styles for
     the generated content: */
  display: block;
  width: 10em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  background: #F60;
  color: #fff;
  font-size: 1.4rem;
  position: absolute;
  top: 30px;
  right: 0px;
  z-index: 1;
}

I would like to make a folded corner sort of like in this post: Folded banner using css

--- Original post ---

Let me first explain what I'm trying to do. I'm trying to give some post some extra attention by making a little circle with some call-to-action text in it.

But I only want this to trigger when a div has a specific class.

So if the div the class populair or sale I would like to have a little circle show up on that post. This script what I am using right now.

$(document).ready(function($){
  if($("#front-page-items").hasClass('populair')){
    $(".populair-div").show();
  }
  if($("#front-page-items").hasClass('sale')){
    $(".sale-div").show();
  }    
});

And this HTML:

<div class="populair-div" style="display:none;">
    <strong>Populair</strong>
</div>
<div class="sale-div" style="display:none;">
    <strong>Sale</strong>
</div>

But this only show's the populair-div and not the other one. I'm guessing my script is wrong. Should I use else for all the other call-to-action classes?

$(document).ready(function($){
  if($("#front-page-items").hasClass('populair')){
    $(".populair-div").show();
  }
  else($("#front-page-items").hasClass('sale')){
    $(".sale-div").show();
  } 
  else($("#front-page-items").hasClass('Free')){
    $(".free-div").show();
  } // and so on
});

Is there someone that could help me out? Also is it possible to echo the div so I don't have to write a whole div for every call-to-action div?

Answer 1

For something like this, where the displayed text is explicitly linked to the class-name of the element it's easiest to use CSS and the generated content available, effectively hiding the elements you don't wish to show by default and then explicitly allowing elements you want to show, along with the generated content of those elements (using the ::before and ::after pseudo-elements:

div {
  /* preventing <div> elements
     from showing by default: */
  display: none;
}
div.populair-div,
div.sale-div {
  /* ensuring that elements matching
     the selectors above (<div>
     elements with either the 'sale-div'
     or 'populair-div' class-names
     are shown: */
  display: block;
}
div.populair-div::before,
div.sale-div::before {
  /* setting the default styles for
     the generated content: */
  display: block;
  width: 4em;
  height: 4em;
  line-height: 4em;
  text-align: center;
  border: 3px solid transparent;
  border-radius: 50%;
}
div.populair-div::before {
  /* setting the text with the
     "content" property: */
  content: "Popular";
  /* providing a specific colour
     for the generated contents'
     border: */
  border-color: #0c0;
}
div.sale-div::before {
  content: "Sale";
  border-color: #f90;
}
/* entirely irrelevant, just so you can
   see a (slightly prettified) difference
   should you remove the default display
   property for the <div> elements: */

code {
  background-color: #ddd;
}
em {
  font-style: italic;
}

<div class="neither-popular-nor-sale">
  <p>
    This element should not be shown, it has neither a class of <code>"populair-div"</code>  <em>or</em>  <code>"sale-div"</code>.
  </p>
</div>
<div class="populair-div">
</div>
<div>Also not to be shown.</div>
<div class="sale-div">
</div>

</div>