add/remove class if id/class match
<p>I'm trying to link up a dot navigation with a carousel type div layout and need the correct div to display when each specific dot is clicked, and also visa versa so the dot is active while it's specific div is displayed. The second part is important because I have more than one form of navigation.  </p>

<p>Here is the project <a href="http://polyhedron.io/" rel="nofollow">http://polyhedron.io/</a></p>

<p>The dots html</p>

<pre><code>&lt;div class="dotstyle dotstyle-scaleup"&gt;
        &lt;ul&gt;
            &lt;li id="avn" class="current"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li id="pp"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li id="w65"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li id="trs"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li id="cc"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>

<p>The (wordpress menu) project html</p>

<pre><code>&lt;ul id="menu-project" class="show"&gt;
  &lt;li class="avn selected"&gt;&lt;/li&gt;
  &lt;li class="pp"&gt;&lt;/li&gt;
  &lt;li class="w65"&gt;&lt;/li&gt;
  &lt;li class="trs"&gt;&lt;/li&gt;
  &lt;li class="cc"&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>jQuery</p>

<pre><code>$(document).ready(function(){
    var dots = $('.dotstyle ul li');
    var project = $('ul#menu-project li.menu-item');
    var dotsId = dots.attr('id');
    var projectClass = project.attr('class');

    $(dots).click(function(){
        $(dots).removeClass('current');
        $(this).addClass('current');
    });

    $(dots).each(function(){
        if (dots.hasClass('current')) {
            if (dotsId = projectClass) {
                project.addClass('selected');
            } else {
                project.removeClass('selected');
            }
        } else {

        }
    });
});
</code></pre>

<p>This is the closest I could get but it's currently just adding the "selected" to every list item. </p>