jQuery onclick изменить z-индекс

ProgramBox

jQuery onclick изменить z-индекс

Post author:admin
Запись опубликована:25 октября, 2022
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Основная цель: «после нажатия z-index страницы переместиться на самый передний, а самый передний — за выбранным».

Мой подход: onclick изменить выбранный класс z-index на самый передний и вычесть текущий самый передний z-индекс на единицу

     //vars
    var firstPage = $('.page-hub');

    //check what class is clicked
    $('div').click(function() {
        var theClass = this.className;
        alert(theClass);

        if(theClass == 'page page-1' amp;amp; theClass.css('z-index') != firstPage){
            alert ('move me to front!');//most front z-index -= 1 and the clicked class page to z-index of 4
            theClass.css('z-index', '4');
            firstPage.css('z-index', '-=1');
            firstPage = theClass;
        }
        //and now the firstPage var is supposedly be the new clicked class which is page .page-1
    });

ps: Это то, что я придумал, но я не уверен, как это написать, или этот подход может быть полностью неправильным.

и я не уверен, каков наилучший подход к этому. Я в основном переписываю все на самом деле. На данный момент я в отчаянии, заранее благодарю вас.

css:

   margin-left: 0px;
  transition: margin-left .6s;
}

.page-container .page {
  position: absolute;
  width: 1200px;
  height: 712px;

  box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);
}

/*page-hub*/

.page-hub-inside {
  transform: scale(1);
  transition: transform .6s;
}

ul.roulette-title {
  width: 100%;
  text-align: center;
  margin-top: 200px;
}

ul li.roulette-title-text {
  font-family: "LeagueGothic";
  font-size: 170px;

  display: inline;
  margin-left: 5px;
}

ul h2.wheel-sub-title {
  font-family: "Halimun";
  color: white;
  font-stretch: ultra-expanded;
  font-size: 40px;
}

.page-hub {
  z-index: 4;
  background-color: rgb(32, 32, 32);
  margin-left: 0px;
}

.page-hub-bookmark-arrow  {
  margin-top: 205px;
  margin-left: 1200px;
  /*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/

  border-top: solid transparent;
  border-left: solid rgb(32, 32, 32);
  border-bottom: solid transparent;
  border-right: solid transparent;

  border-top-width: 25px;
  border-left-width: 25px;
  border-right-width: 25px;
  border-bottom-width: 25px;
  width: 25px;
  height: 25px;
}

.page-hub:hover .page-hub-inside {
  transform: scale(1.05);
}

/*page-1*/

.page-1 {
  margin-left: 50px;
  z-index: 3;
  background-color: rgb(255, 111, 111);
  transition: margin-left .6s;
}

.page-1 .page-1-bookmark-arrow {
  margin-left: 1200px;
  /*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/

  border-top: solid transparent;
  border-left: solid rgb(255, 111, 111);
  border-bottom: solid transparent;
  border-right: solid transparent;

  border-top-width: 25px;
  border-left-width: 25px;
  border-right-width: 25px;
  border-bottom-width: 25px;
  width: 25px;
  height: 25px;
}

.page-1:hover {
  margin-left: 100px;
}

/*page-2*/

.page-2 {
  margin-left: 100px;
  z-index: 2;
  background-color: rgb(138, 202, 255);
  transition: margin-left .6s;
}

.page-2 .page-2-bookmark-arrow {
  margin-top: 50px;
  margin-left: 1200px;
  /*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/

  border-top: solid transparent;
  border-left: solid rgb(138, 202, 255);
  border-bottom: solid transparent;
  border-right: solid transparent;

  border-top-width: 25px;
  border-left-width: 25px;
  border-right-width: 25px;
  border-bottom-width: 25px;
  width: 25px;
  height: 25px;
}

.page-2:hover {
  margin-left: 150px;
}

/*page-3*/

.page-3 {
  margin-left: 150px;
  z-index: 1;
  background-color: rgb(255, 253, 149);
  transition: margin-left .6s;
}

.page-3 .page-3-bookmark-arrow {
  margin-top: 100px;
  margin-left: 1200px;
  /*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/

  border-top: solid transparent;
  border-left: solid rgb(255, 253, 149);
  border-bottom: solid transparent;
  border-right: solid transparent;

  border-top-width: 25px;
  border-left-width: 25px;
  border-right-width: 25px;
  border-bottom-width: 25px;
  width: 25px;
  height: 25px;
}

.page-3:hover {
  margin-left: 200px;
}

/*page-rule*/
.page-rule {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #fff;
  z-index: 0;
}

.page-rule-hover-fx {
  margin-left: -50px;
  transition: margin-left .6s;
}

HTML:

     <div class="page-container">
        <div class="page page-hub">
            <div class="page-hub-inside">
                <ul class="roulette-title">
                    <li class="roulette-title-text" style="color: rgb(255, 253, 149);">R</li>
                    <li class="roulette-title-text" style="color: rgb(138, 255, 154);">O</li>
                    <li class="roulette-title-text" style="color: rgb(138, 212, 255)">U</li>
                    <li class="roulette-title-text" style="color: rgb(255, 111, 111);">L</li>
                    <li class="roulette-title-text" style="color: rgb(138, 255, 154);">E</li>
                    <li class="roulette-title-text" style="color: rgb(138, 212, 255)">T</li>
                    <li class="roulette-title-text" style="color: rgb(255, 253, 149)">T</li>
                    <li class="roulette-title-text" style="color: rgb(255, 111, 111);">E</li>

                    <h2 class="wheel-sub-title">~ Wheel ~</h2>
                </ul>
            </div>
            <div class="page-hub-bookmark-arrow"></div>
        </div>
        <div class="page page-1">
            <div class="page-1-bookmark-arrow"></div>
        </div>
        <div class="page page-2">
            <div class="page-2-bookmark-arrow"></div>
        </div>
        <div class="page page-3">
            <div class="page-3-bookmark-arrow"></div>
        </div>

    </div>

    <div class="page-rule">
        <div class="page-rule-hover-fx"></div>
    </div>

1. вы не меняете только z-индекс, также вы меняете классы, нужна точность в этом .. и какое самое высокое значение впереди (4?)… и тест TheClass.css(‘z-index’) != FirstPage не имеет смысла

2. Пожалуйста, опубликуйте все ваши CSS и jQuery.

3. @FSDford извините за неполный пост, я отредактировал их с помощью css и html

4. @Frenchy наибольшее значение равно 4, и я пытался проверить, не является ли z-индекс класса z-индексом первой страницы, затем преобразуйте z-индекс класса в 4 и вычтите z-индекс первой страницы на 1

5. извините, я не понимаю логику, которую вы хотите… вы просто хотите щелкнуть по div page-1 на page-3, не нажимая на концентратор?

Ответ №1:

Если я понял вашу проблему….

Я предлагаю вам вместо того, чтобы поменять местами z-индекс, поменять местами классы, потому что классы связаны с z-индексом.. Если вы действительно хотите поменять z-индекс, это одно из решений .. если вы предпочитаете использовать классы, раскомментируйте код с помощью замены classeS…In в любом случае, у вас есть хорошее начало для анализа моего кода.

 $('div .page').on('click', function(event){
    event.stopPropagation();
    var z_clicked = $(this).css('z-index');
    var class_clicked = $(this).attr('class');
    alert('clicked on z-index ='   z_clicked   ' classes='   class_clicked);

    if(z_clicked == 4) return false;
    //trap the div which has z-index = 4
     var z4 = $('div .page').filter(function(){
       return $(this).css('z-index') == 4;
    });
    // uncomment if you want to swap the classes instead z-index
    //swap the classes betwwen div clicked and div on topFront
    //var class_toBack = z4.attr('class');
    
    //z4.toggleClass(class_toBack).toggleClass(class_clicked);
    //$(this).toggleClass(class_clicked).toggleClass(class_toBack);
    
    //swap the z-index
    alert('z4 classes='   z4.attr('class'));
    z4.css('z-index', $(this).css('z-index'));
    $(this).css('z-index', 4);
       // alert(z4.css('z-index'));
    
  });

 .page-container .page {
  position: absolute;
  width: 1200px;
  height: 712px;

  box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);
}

/*page-hub*/

.page-hub-inside {
  transform: scale(1);
  transition: transform .6s;
}

ul.roulette-title {
  width: 100%;
  text-align: center;
  margin-top: 200px;
}

ul li.roulette-title-text {
  font-family: "LeagueGothic";
  font-size: 170px;

  display: inline;
  margin-left: 5px;
}

ul h2.wheel-sub-title {
  font-family: "Halimun";
  color: white;
  font-stretch: ultra-expanded;
  font-size: 40px;
}

.page-hub {
  z-index: 4;
  background-color: rgb(32, 32, 32);
  margin-left: 0px;
}

.page-hub-bookmark-arrow  {
  margin-top: 205px;
  margin-left: 1200px;
  /*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/

  border-top: solid transparent;
  border-left: solid rgb(32, 32, 32);
  border-bottom: solid transparent;
  border-right: solid transparent;

  border-top-width: 25px;
  border-left-width: 25px;
  border-right-width: 25px;
  border-bottom-width: 25px;
  width: 25px;
  height: 25px;
}

.page-hub:hover .page-hub-inside {
  transform: scale(1.05);
}

/*page-1*/

.page-1 {
  margin-left: 50px;
  z-index: 3;
  background-color: rgb(255, 111, 111);
  transition: margin-left .6s;
}

.page-1 .page-1-bookmark-arrow {
  margin-left: 1200px;
  /*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/

  border-top: solid transparent;
  border-left: solid rgb(255, 111, 111);
  border-bottom: solid transparent;
  border-right: solid transparent;

  border-top-width: 25px;
  border-left-width: 25px;
  border-right-width: 25px;
  border-bottom-width: 25px;
  width: 25px;
  height: 25px;
}

.page-1:hover {
  margin-left: 100px;
}

/*page-2*/

.page-2 {
  margin-left: 100px;
  z-index: 2;
  background-color: rgb(138, 202, 255);
  transition: margin-left .6s;
}

.page-2 .page-2-bookmark-arrow {
  margin-top: 50px;
  margin-left: 1200px;
  /*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/

  border-top: solid transparent;
  border-left: solid rgb(138, 202, 255);
  border-bottom: solid transparent;
  border-right: solid transparent;

  border-top-width: 25px;
  border-left-width: 25px;
  border-right-width: 25px;
  border-bottom-width: 25px;
  width: 25px;
  height: 25px;
}

.page-2:hover {
  margin-left: 150px;
}

/*page-3*/

.page-3 {
  margin-left: 150px;
  z-index: 1;
  background-color: rgb(255, 253, 149);
  transition: margin-left .6s;
}

.page-3 .page-3-bookmark-arrow {
  margin-top: 100px;
  margin-left: 1200px;
  /*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/

  border-top: solid transparent;
  border-left: solid rgb(255, 253, 149);
  border-bottom: solid transparent;
  border-right: solid transparent;

  border-top-width: 25px;
  border-left-width: 25px;
  border-right-width: 25px;
  border-bottom-width: 25px;
  width: 25px;
  height: 25px;
}

.page-3:hover {
  margin-left: 200px;
}

/*page-rule*/
.page-rule {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #fff;
  z-index: 0;
}

.page-rule-hover-fx {
  margin-left: -50px;
  transition: margin-left .6s;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">
        <div class="page page-hub">
            <div class="page-hub-inside">

                    <h2 class="wheel-sub-title">~ Wheel ~</h2>
                </ul>
            </div>
            <div class="page-hub-bookmark-arrow"></div>

        <div class="page page-1">
            <div class="page-1-bookmark-arrow"></div>
        </div>
        <div class="page page-2">        </div>
            <div class="page-2-bookmark-arrow"></div>
        </div>
        <div class="page page-3">
            <div class="page-3-bookmark-arrow"></div>
        </div>

    </div>

    <div class="page-rule">
        <div class="page-rule-hover-fx"></div>
    </div>

Развернуть фрагмент

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

Церковные цифры и несоответствие вселенной

Угловой 6-секундный вложенный дочерний маршрут не работает

Захват содержимого собственных прототипов