javascript - Load content on page load dependant on hash url parameters -

jquery/javascript novice trying figure out how load content on page dependent on multiple window.location.hash parameters.

i wondering if create if statement following:

    if (window.location.hash){               $('li[data-style"' + style + '"]', '#options > ul').trigger('click'); }  else {     $('li:first', '#options > ul').trigger('click');     } 

the else statement works can't if statement work. full code below

<script>  (function($) {      var urlprops = {};      $('#options > ul').on('click', 'li', function() {        var $this = $(this).addclass('selected'),        imgid = $this.parent('ul').data('img'),        img = $(imgid),        cat = $this.data('cat'),        style = $this.data('style'),  	  desc = $this.text();        $this.siblings().removeclass('selected')        img.attr('src', '/' + cat + '/' + style + '.png').attr('alt', 'tool ' + desc);        urlprops[cat] = style;        buildurl();      });      function buildurl() {             var combinedprops = $.param(urlprops),        baseurl = window.location.href,        finalurl = baseurl + '#' + combinedprops;    	$(location).attr('hash', combinedprops);     	}       	if (window.location.hash){			  		$('li[data-style"' + style + '"]', '#options > ul').trigger('click');  	}  	  	else {  		$('li:first', '#options > ul').trigger('click');  		}    })(jquery);    </script>

.selected {    background: red;  }  #url {    color: blue;    font-size: 11px;  }

<h3>  url = <span id="url"></span>  </h3>  <h3>  images  </h3>  <img id="wallimg" src="/testpath/selwall/nopaint.jpg" />  <img id="doorimg" src="/testpath/selwall/nopaint.jpg">  <img id="handleimg" src="/testpath/selwall/nopaint.jpg">  <img id="topimg" src="/testpath/selwall/nopaint.jpg">  <img id="floorimg" src="/testpath/selwall/nopaint.jpg">      <h3>  options  </h3>    <div id="options">      <ul class="seldoor" data-img="#doorimg">      <li data-cat="door" data-style="white">white door</li>      <li data-cat="door" data-style="red">red door</li>      <li data-cat="door" data-style="yellow">yellow door</li>    </ul>      <ul class="selhandle" data-img="#handleimg">      <li data-cat="handle" data-style="round">round knob</li>      <li data-cat="handle" data-style="cup">cup handle</li>      <li data-cat="handle" data-style="bar">bar handle</li>    </ul>      <ul class="seltop" data-img="#topimg">      <li data-cat="top" data-style="wood">wood top</li>      <li data-cat="top" data-style="plastic">plastic top</li>      <li data-cat="top" data-style="stone">stone top</li>    </ul>      <ul class="selfloor" data-img="#floorimg">      <li data-cat="floor" data-style="wood">wood floor</li>      <li data-cat="floor" data-style="tile">tile floor</li>      <li data-cat="floor" data-style="laminate">laminate floor</li>    </ul>        <ul class="selwall" data-img="#wallimg">      <li data-cat="wall" data-style="bluepaint">blue walls</li>      <li data-cat="wall" data-style="redpaint">red walls</li>      <li data-cat="wall" data-style="greenpaint">green walls</li>    </ul>      </div>

any pointers on problem appreciated.

you forgot = in selector:

$('li[data-style="' + style + '"]', '#options > ul')