Using a Jquery variable inside of a .html() function [duplicate]

Question

So I have a Jquery if statement that displays different content inside a div using $(".library-content").html("Here is some content!") but I want a section of the content displayed to be dependent on a variable. So if the variable was set to "cats" the content might read "I like cats" and if the variable changes to "dogs" it would read "I like dogs". Is it possible?

here is my code, it is quite long so i tried to shorten it in my example,

 var librarycat = 'none' ;
 var librarytype = 'none' ;

$( document ).ready(function() {
$("#library-cat").change(function() {
  librarycat = $('option:selected',this).val(); 
  if(librarycat != 'none' && librarytype != 'none') {
        $(".library-content").html("{% set topic_posts = blog_recent_topic_posts('2941362257', 'audio', 25 ) %}<ul class='test-list'>{% for post in topic_posts|unique('name') %}{% if 'audio' in post.topic_list|map(attribute='name') %}<li><a href='{{post.absolute_url}}'><img src='{{ post.post_list_summary_featured_image }}' class='hs-featured-image'>{{ post.name}}</a><br>{% for topic in post.topic_list %}<a class='topic-link' href='{{ group.absolute_url }}/topic/{{ topic.slug }}'>{{ topic.name }}</a>{% if not loop.last %} {% endif %}{% endfor %}</li>{% endif %}{% endfor %}</ul>");
}
else if(librarycat == 'none' && librarytype != 'none') {
    $(".library-content").html("{% set topic_posts = blog_recent_topic_posts('2941362257', 'audio', 25 ) %}<ul class='test-list'>{% for post in topic_posts|unique('name') %}<li><a href='{{post.absolute_url}}'><img src='{{ post.post_list_summary_featured_image }}' class='hs-featured-image'>{{ post.name}}</a><br>{% for topic in post.topic_list %}<a class='topic-link' href='{{ group.absolute_url }}/topic/{{ topic.slug }}'>{{ topic.name }}</a>{% if not loop.last %} {% endif %}{% endfor %}</li>{% endfor %}</ul>")
}
else if(librarycat != 'none' && librarytype == 'none') {
    $(".library-content").html("{% set topic_posts = blog_recent_topic_posts('2941362257', 'audio', 25 ) %}<ul class='test-list'>{% for post in topic_posts|unique('name') %}<li><a href='{{post.absolute_url}}'><img src='{{ post.post_list_summary_featured_image }}' class='hs-featured-image'>{{ post.name}}</a><br>{% for topic in post.topic_list %}<a class='topic-link' href='{{ group.absolute_url }}/topic/{{ topic.slug }}'>{{ topic.name }}</a>{% if not loop.last %} {% endif %}{% endfor %}</li>{% endfor %}</ul>")
}
else {
    $(".library-content").html("{% set topic_posts = blog_recent_topic_posts('2941362257', 'audio', 25 ) %}<ul class='test-list'>{% for post in topic_posts|unique('name') %}{% if 'Insurance' in post.topic_list|map(attribute='name') %}<li><a href='{{post.absolute_url}}'><img src='{{ post.post_list_summary_featured_image }}' class='hs-featured-image'>{{ post.name}}</a><br>{% for topic in post.topic_list %}<a class='topic-link' href='{{ group.absolute_url }}/topic/{{ topic.slug }}'>{{ topic.name }}</a>{% if not loop.last %} {% endif %}{% endfor %}</li>{% endif %}{% endfor %}</ul>")
     }
 });

where you see the word 'audio' I would like this to be depended on a select element.

It seems you already know about the if statement, and that it would be enough to solve your issue. — Jon
– Jon, Commented Dec 1, 2015 at 19:49

isherwood · Accepted Answer · 2015-12-01 19:54:26Z

1

Since you're new in town I'll help you out. In the future, please have a look at the help pages and provide some of your code.

if (firstThing === firstThing) {
    var myString = "Some words";

    if (secondThing) {
        myString = myString + "are pretty cool";
    }

    $(".library-content").html(myString);
}

answered Dec 1, 2015 at 19:54

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Erin Over a year ago

I got this to work with my code, thanks!

Brino · Accepted Answer · 2015-12-01 19:51:25Z

-1

Use an if statement and local variables to set your message. The input to the .html() function can be a variable or static text.

$().ready(function() {
    var useCats = false;
    var catsMessage = "I Like Cats";
    var dogsMessage = "I Like Dogs";
    if(useCats)
      $(".library-content").html(catsMessage);
    else
      $(".library-content").html(dogsMessage);
});

$().ready(function() {
  var useCats = false;
  var catsMessage = "I Like Cats";
  var dogsMessage = "I Like Dogs";
  if(useCats)
    $(".library-content").html(catsMessage);
  else
    $(".library-content").html(dogsMessage);
});

.library-content {
  border: 1px solid red;
  width: 200px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="library-content">Original Content</div>

answered Dec 1, 2015 at 19:51

Brino

2,5121 gold badge23 silver badges37 bronze badges

2 Comments

Erin Over a year ago

The thing is there are so many different options I would rather not have like 30 if statements.

Brino Over a year ago

be more specific in your question, provide a full code example, and expected output

Collectives™ on Stack Overflow

Using a Jquery variable inside of a .html() function [duplicate]

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related