使用Jquery来回切换内容

Question

I have an app where when the user clicks on a table, assigned to btnAlternativeService, the content from this table swaps with another one.

The jQuery I have used involves creating two variables for each piece of content in the table, one to act as a JS selector and another to retain the original content. It looks like this:

// Switch between the two services
  btnAlternativeService.on('click', function(){

    // Set original recommended text variables
    var serviceSubTextOriginal = $('.js-second-step .subtext-top').text();
    var serviceProductTitleOriginal = $('.js-second-step .product-title').text();
    var serviceMileageOriginal = $('.js-miles').text();
    var serviceRecommendationOriginal = $('.js-second-step .full-rec').text();

    // Set recommended text selector variables
    var serviceSubText = $('.js-second-step .subtext-top');
    var serviceProductTitle = $('.js-second-step .product-title');
    var serviceMileage = $('.js-miles');
    var serviceRecommendation = $('.js-second-step .full-rec');

    // Set original alternative variables
    var alternativeProductTitleOriginal = $('.js-alternative h3').text();
    var alterativeMilageOriginal = $('.js-miles-alternative').text();
    var alternativeSubTextOriginal = $('.js-alternative .alternative-subtext').text();

    // Set alternative selector variables
    var alternativeProductTitle = $('.js-alternative h3');
    var alterativeMilage = $('.js-miles-alternative');
    var alternativeSubText = $('.js-alternative .alternative-subtext');

    // Swap everything around
    serviceProductTitle.text(alternativeProductTitleOriginal);
    serviceMileage.text(alterativeMilageOriginal);
    serviceRecommendation.text(alternativeSubTextOriginal);
    alternativeSubText.text(serviceRecommendationOriginal);
    alternativeProductTitle.text(serviceProductTitleOriginal);
    alterativeMilage.text(serviceMileageOriginal);
  }); 

This seems very long winded - is there a better way for me to swap the content around?

Answer 1

You can select the elements by order and create 2 collections and use the indices for setting the text contents:

var $first = $('.js-second-step .subtext-top, ...');
var $second = $('.js-alternative h3, ...');

$first.text(function(index, thisText) {
    // select the corresponding element from the second set
    var $that = $second.eq( index ), thatText = $that.text();

    $that.text( thisText );
    return thatText;
});

Answer 2

Use a function:

function switchContent(selector_1, selector_2){
   data_1 = $(selector_1).text()
   data_2 = $(selector_1).text()
   $(selector_1).text(data_2)
   $(selector_2).text(data_1)
 }

btnAlternativeService.on('click', function(){
  switchContent('.js-alternative h3', '.js-second-step .product-title') 
  switchContent('.js-miles-alternative', '.js-miles')    
  switchContent('.js-alternative .alternative-subtext', '.js-second-step .full-rec')
});