レスポンシブでwindow縮小時にwrap()で<a href>を追加してelseで<a href>削除したいです。

Question

レスポンシブサイト作ってる途中です。
ブラウザ幅がスマホ時にだけfancybox起動させたいですが、
jsくそ初心者なもので、if文が思いつかなくなりました…。

<a href="">で<div class="box_inner">を囲ったり囲わなかったりしたいです。

###発生している問題・エラーメッセージ

elseのときに<li>が消えてしまいます。。
if( w <= 570 && w )のとき、<a href>が出てきません。。。

###該当のソースコード

$(function(){
    var $box= $("li .box_inner");
    function spHideModal(){
        var w = window.innerWidth;
        if( w <= 570 && w ){
            $box.wrap(function(index) {
                return '<a href="' + $(this).children('.staff_prof img').attr('src') + '" class="modal_btn" />';
            });
            $(".modal_btn").fancybox();
        }else{
            $box.unwrap();
        }
    }
    $(window).on("load resize", function(){
        spHideModal();
    });
    
});

//HTML-------------------------------------------

        ```

<li> <div class="box_inner"> <div class="bg_img"><img src="photo_01.jpg" alt="" class="photo"></div> <div class="staff_prof sp_hide"><img src="profile_01.gif" alt=""></div> <div class="staff_name pc_hide"> <p class="name">ああああああ</p> <p class="team">にゃあああああああ</p> </div> </div> </li> ```

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)
jQuery v1.9.1

Comments

[kei344]

コードはコードブロックで囲んでください。```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[nyan_poi]

こうでしょうか。失礼いたしました。

[kei344]

バッククオート3つの前後には改行を入れてください。記入エリアの下部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

Answer 1

・fancyboxからcolorboxに変更。
・.wrap()での処理をやめました。
・<div class="box_inner">を<a href>に変更。

$(function(){
    var $box= $("li > a");

    function spHideModal(){
        var w = window.innerWidth;
        $box.each(function(){
            var $modalImg = $(this).children('.staff_prof').children('img').attr('src');
            
            if( w <= 765 && w){
                $(this).attr("href", $modalImg).addClass("modal_btn");
                $(".modal_btn").colorbox();
            }else{
                $(this).attr("href", "javascript:void(0);").removeClass("modal_btn cboxElement");
                $("#cboxOverlay").add("#colorbox").hide();
            }
        });
    }
    
    $(window).on("load resize", function(){
        spHideModal();
    });

});

html---

 <li>
                <a href="">
                    <div class="bg_img"><img src="photo_01.jpg" alt="" class="photo"></div>
                    <div class="staff_prof sp_hide"><img src="profile_01.gif" alt=""></div>
                    <div class="staff_name pc_hide">
                        <p class="name">ああああああ</p>
                        <p class="team">にゃあああああああ</p>
                    </div>
                </a>
            </li>

Answer 2

こういう書き方も教えてもらいました。
・プラグイン未使用？？
・<a href_>無し

$(function(){
	$(".staff_box").each(function(){
		var $modalImg = $(this).children('.staff_prof').children('img').attr('src');
		$(this).on("click",function(){
			var _w = window.innerWidth;
			if( _w <= 765 && _w){
				$("body").prepend("<div class='staff_colorbox'><div class='staff_bg'></div><div class='staff_img'><div class='staff_img_inner'><div class='staff_close_btn close_top'>×</div><img src='"+$modalImg+"'><div class='staff_close_btn close_bottom'>CLOSE</div></div></div></div>")
				$(".staff_colorbox .staff_img").css("top",$(this).offset().top+10);
				$(".staff_colorbox .staff_img").width( $(window).width() );
				$(".staff_colorbox .staff_img img").velocity({opacity:0,scale:1},0).velocity({opacity:1,scale:1},400)
				$(".staff_colorbox, .staff_close_btn").on("click",function(){
					$(window).off("resize.staffbox");
					$(".staff_colorbox").remove();
				});
				$(".staff_colorbox img").on("click",function(e){
					e.preventDefault();
					e.stopPropagation();
				});
				$(window).on("resize.staffbox", function(){
					var __w = window.innerWidth;
					if( __w <= 765 && __w){
						$(".staff_colorbox .staff_img").width( __w );
					}else{
						$(window).off("resize.staffbox");
						$(".staff_colorbox").remove();
					}
				});
			}
		})
	});
});

<li class="staff_box">
                <div class="bg_img"><img src="../img/staff/dummy.jpg" alt="" class="photo"></div>
                <div class="staff_prof sp_hide"><img src="../img/staff/staff_profile_01.gif" alt=""></div>
                <div class="staff_name pc_hide">
                    <p class="name">うわあああああああ</p>
                    <p class="team">わああああああああああ</p>
                </div>
	        </li>

Answer 3

Colorboxは a タグでなくても使えます。また、remove メソッドが有るのでそれを使えばイベントを消すことができます。

$( "li" ).colorbox( { href: "photo_01.jpg" } );
$.colorbox.remove() ;