swiping images between span on click using javascript

Question

jsfiddle : http://jsfiddle.net/zrqjLrjf/

html code :

<div class="ListViewLayout_dv">
  <a href="javascript:void(0)" onclick="swipeDisplay('list')" id="lb_ListView"  title="List" style="position: relative;top: 3px;"><span class="grid-listView1">&nbsp;&nbsp;&nbsp;&nbsp;</span></a> &nbsp;
  <a href="javascript:void(0)" onclick="swipeDisplay('grid')" id="A1"  title="Grid" style="position: relative;top: 3px;"><span class="grid-GridView">&nbsp;&nbsp;&nbsp;&nbsp;</span></a> 
</div>

script :

 function swipeDisplay(view) {
        if (view == "list") {
            $(".grid-listView1").each(function () {
                $(this).removeAttr("class");
                $(this).addClass("grid-listView");
            });
            $(".grid-GridView1").each(function () {
                $(this).removeAttr("class");
                $(this).addClass("grid-GridView");
            });
        }
        else {
              $(".grid-GridView").each(function () {
                $(this).removeAttr("class");
                $(this).addClass("grid-GridView1");
            });
        }
    }

I am having a problem swiping between images when clicking on them , what i want to do basically is when i click on the list image it should get unfocused and the grid image should be focused and vise-versa

Answer 1

Here you are :)

 function swipeDisplay(view) { if (view == "list") { $(".grid-listView").each(function() { $(this).removeAttr("class"); $(this).addClass("grid-listView1"); }); $(".grid-GridView1").each(function() { $(this).removeAttr("class"); $(this).addClass("grid-GridView"); }); } else { $(".grid-GridView").each(function() { $(this).removeAttr("class"); $(this).addClass("grid-GridView1"); }); $(".grid-listView1").each(function() { $(this).removeAttr("class"); $(this).addClass("grid-listView"); }); } } 

 .grid-listView { background: url(http://www.ishtari.com/catalog/view/theme/marketshop/image/list-icon.png) left -68px no-repeat; display: inline-block; } .grid-listView1 { background: url(http://www.ishtari.com/catalog/view/theme/marketshop/image/list-icon.png) left -45px no-repeat; display: inline-block; } .grid-GridView { background: url(http://www.ishtari.com/catalog/view/theme/marketshop/image/list-icon.png) left -23px no-repeat; display: inline-block; } .grid-GridView1 { background: url(http://www.ishtari.com/catalog/view/theme/marketshop/image/list-icon.png) left top no-repeat; display: inline-block; } .ListViewLayout_dv { position: relative; left: 8px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="ListViewLayout_dv"> <a href="javascript:void(0)" onclick="swipeDisplay('list')" id="lb_ListView" title="List" style="position: relative;top: 3px;"><span class="grid-listView1">&nbsp;&nbsp;&nbsp;&nbsp;</span></a> &nbsp; <a href="javascript:void(0)" onclick="swipeDisplay('grid')" id="A1" title="Grid" style="position: relative;top: 3px;"><span class="grid-GridView">&nbsp;&nbsp;&nbsp;&nbsp;</span></a> </div> 

Answer 2

try this:

function swipeDisplay(view) {
    if (view == "list") {
        $(".grid-listView1").each(function () {
            $(this).removeAttr("class");
            $(this).addClass("grid-listView");
        });
        $(".grid-GridView1").each(function () {
            $(this).removeAttr("class");
            $(this).addClass("grid-GridView1");
        });
    }
    else {
          $(".grid-GridView").each(function () {
            $(this).removeAttr("class");
            $(this).addClass("grid-GridView1");
        });

          $(".grid-listView1").each(function () {
              $(this).removeAttr("class");
              $(this).addClass("grid-listView");
          });
    }
}

Answer 3

Try this example, without using any script, actually its a work around.

 input[id^=list], input[id^=grid] { display: none; } input[id^=list] + label, input[id^=grid] + label { display: inline-block; width: 18px; height: 18px; } input[id^=grid] + label { background: url('http://www.ishtari.com/catalog/view/theme/marketshop/image/list-icon.png'); background-position-y: 63px; } input[id^=list] + label { background: url('http://www.ishtari.com/catalog/view/theme/marketshop/image/list-icon.png'); background-position-y: 18px; } input[id^=grid]:checked + label { background: url('http://www.ishtari.com/catalog/view/theme/marketshop/image/list-icon.png'); background-position-y: 86px; } input[id^=list]:checked + label { background: url('http://www.ishtari.com/catalog/view/theme/marketshop/image/list-icon.png'); background-position-y: 41px; } 

 <input type='radio' name='view' id='list1' checked="checked" /> <label for='list1'></label> <input type='radio' name='view' id='grid1' /> <label for='grid1'></label> 

Answer 4

Here you are using jQuery already, then I guess you don't need to write a long code to achieve the same solution. You can use the below code incase, if you want to optimize it: - You can remove the onclick attribute on the html tags and have it bind from jquery itself for loose binding:

HTML Code:

<div class="ListViewLayout_dv">
    <a href="javascript:void(0)" id="lb_ListView" title="List" style="position: relative;top: 3px;"><span class="grid-listView selected">&nbsp;&nbsp;&nbsp;&nbsp;</span></a> &nbsp;
    <a href="javascript:void(0)" id="lb_GridView" title="Grid" style="position: relative;top: 3px;"><span class="grid-GridView">&nbsp;&nbsp;&nbsp;&nbsp;</span></a> 
</div>

CSS Code:

.grid-listView {
    background: url(http://www.ishtari.com/catalog/view/theme/marketshop/image/list-icon.png) 0 -68px no-repeat;
    display:inline-block;
}
.grid-listView.selected {
    background: url(http://www.ishtari.com/catalog/view/theme/marketshop/image/list-icon.png) 0 -45px no-repeat;
    display:inline-block;
}
.grid-GridView {
  background: url(http://www.ishtari.com/catalog/view/theme/marketshop/image/list-icon.png) 0 -23px no-repeat;
  display:inline-block;
}
.grid-GridView.selected {
  background: url(http://www.ishtari.com/catalog/view/theme/marketshop/image/list-icon.png) 0 0 no-repeat;
  display:inline-block;
}
.ListViewLayout_dv {
    position: relative;
    left: 8px;
}

JS Code:

$("#lb_ListView, #lb_GridView").on("click", "span", function(){
    $("span").removeClass("selected");
    $(this).toggleClass("selected");
});